Web Technologies and Applications an OverviewReview of the Technology Landscape

IT 6753 Advanced Web Concepts and Applications

Jack G ZhengSpring 2014

httpjackzhengnetteachingit6753

Overview

Review

Fundamental technology components of WWW

Look at the history

The evolution stages of WWW

Whatrsquos happening now

Quick summary of recent trends

2

What is the Web

The Internet

A world-wide network of networks and computers

based on the Internet Protocol

World Wide Web or Web

A clientserver application for information and

services

An Internet application based on the HTTP protocol

The difference

httpwwwdiffencomdifferenceInternet_vs_World_

Wide_Web

3

What is the Web

The Internet

A world-wide network of networks and computers

based on the Internet Protocol

World Wide Web or Web

A clientserver application for information and

services

An Internet application based on the HTTP protocol

The difference

httpwwwdiffencomdifferenceInternet_vs_World_

Wide_Web

3

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 a common purpose

Web (based) information system an information system that utilizes web technologies to deliver information and services to users or other information systemsapplications

Web application a specific functionality-oriented component that utilizes web technologies to deliver information and services to users or other applicationsinformation 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 applications (or programs or software) that directly serves users through web browsers

Web service A software component that utilizes web technologies to deliver information and services to other applicationsinformation systems

Web framework a framework provides a set of foundations and tools to support additional development for a complete application

4

Key Technology Components

Clientserver architecture

PresentationUIcontentdata language

Client browser

Server

Communication protocol HTTP

Addressing DNS URL

Processing

Processing capabilities at the server or client side

5

The

Internet

Fundamental Technologies in a

Simple Web Architecture

6

Web server HTML Files

HTTP - Response

URL

httpspsueduindexhtml

Web client browser

HTTP - Request

DNS server(s)

Key Technology Components

Clientserver architecture

PresentationUIcontentdata language

Client browser

Server

Communication protocol HTTP

Addressing DNS URL

Processing

Processing capabilities at the server or client side

5

The

Internet

Fundamental Technologies in a

Simple Web Architecture

6

Web server HTML Files

HTTP - Response

URL

httpspsueduindexhtml

Web client browser

HTTP - Request

DNS server(s)

The

Internet

Fundamental Technologies in a

Simple Web Architecture

6

Web server HTML Files

HTTP - Response

URL

httpspsueduindexhtml

Web client browser

HTTP - Request

DNS server(s)

ContentPresentation HTML is a standard markup language to describe a web documentpage using tags

(markups) Web browsers interpret these tags and display the content in a more readable format

An HTML file (or a web page) is just a pure text file created using HTML

The current major version is 401 and version 5 is still being standardized

Are all HTML pages web page ndash not necessarily examples Local htmhtml documents

mht - MIME HTML a web page archive format which is used offline

chm - Microsoft Compiled HTML Help

CSS CSS takes the styling role from the original HTML and is used together with HTML

Current version 30

Other UI format XHTML httpwwww3schoolscomhtmlhtml_xhtmlasp

WML httpenwikipediaorgwikiWireless_Markup_Language

XUL httpenwikipediaorgwikiXul

More httpenwikipediaorgwikiUser_interface_markup_language

Data format Data format is not necessarily used for UI but for data exchangetransfer purposes XML JSON

7

Client Web browser is the most widely-used web client with comprehensive UI

features

Web browser products and market share httpenwikipediaorgwikiUsage_share_of_web_browsers

httpgsstatcountercom

httpwwwnetmarketsharecom

Browserrendering engine the core part that handles the markups scripts and other client processing ndash can be integrated into other programs Gecko used in Mozilla

Trident used in IE

WebKit used in Chrome and Safari

Other types of web client any application that can process HTTP as an client can be view as a web client Embedded browser in a native desktop or mobile application Visual Studio

Web service consumer

Hybrid applications which has a component to communicate with the web server

Specific programs without UI cURL wget etc

8

Servers A web server handles HTTP protocol at the server side

Major web server products (Apache IIS Nginx) and their market share

httpw3techscomtechnologiesoverviewweb_serverall

httpnewsnetcraftcom

A basic web server does not have additional processing capabilities Complemented by web server extensions or modules (eg PHP)

which add programming capabilities to handle advanced processing

More specialized servers used in web applications Application servers enrich and scale web applications with features

like session transaction security etc ndash see server side processing slide later

Database servers for data and content management

Others LDAP Email etc

9

HTTP HTTP (Hypertext Transfer Protocol) is the feature communication

protocol for the web

Features An application layer protocol typically running on top of TCPIP

A request-response cycle protocol

Stateless - httpenwikipediaorgwikiStateless_protocol

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 HTTP request and response messages Use browser integrated developer tools

Use specific sniffing tools like WireShark

httpweb-sniffernet

HTTP status codes httpenwikipediaorgwikiList_of_HTTP_status_codes

10

Addressing URL (Uniform Resource Locator) is used to locate a resource on a web

server A standard in IETF RFC 1630

The World Wide Webrsquos naming scheme had the goal of uniquely identifying all objects stored on the computers on the Internet This addressing has two parts Server address identified by IP addresses or domain names

Fileresource local address identified by local address pointer

Components of a URL Protocol host (domain IP) port file (resource) path

Domain Name System (DNS) A system that provides the conversion between IP addresses and domain names

Top level domains are managed by ICANN (httpwwwicannorg) and IANA (httpwwwianaorg)

Check IP and domain name online httpcqcountercomwhois

URL types File based URL the URL directly corresponds to a file (either static or dynamic)

Resource identifier based URL the URL is only an representation (an access point) of resource (typically used in REST)

11

Processing Processing capabilities enhance the web from an

application aspect

At the client side DHTML httpenwikipediaorgwikiDynamic_HTML

CSS JavaScript and various components and libraries XMLHttpRequest (AJAX) JQuery etc

Browser plug-ins Flash Sliverlight Java Applets ActiveX embedded objects etc

At the server side CGI httpenwikipediaorgwikiCommon_Gateway_Interface

Web server extensions or application servers

Major platforms Net (IIS ASPNet Mono) Java EE (Servlets JSP EJB WebLogic WebSphere) PHP(Zend) ColdFusion etc

12

13

Server Side Complications

Web Server

Extension

Module or

Application Server

Web Server

Client

(Browser)

Request

Response

Database

Server

Other Servers Email LDAP Video streaming other web servers etc

Static Content

Delegation

Adding programming capabilities ASPNet JSP JSF Servlet PHP ColdFusion etc

Generated Content (HTML CSS

JavaScript XML etc)

Major Server Side Platforms

14

Net Java Other

Framework ASPNet Servlet JSP

JSF etc

CGI Perl

PHP Python

ColdFusion

Example

sites

atlanta-airportcom

wwwmariettagagov

neweggcom

monstercom

godaddycom

atpworldtourcom

bankofamericacom

ratemyprofessorscom

cnncom

deltacom

wwwcraigslistorg

wwwwikipediaorg

spsuedu

EVOLUTION OF THE WEB

15

Stages

Pre-web (before 1990)

Earlysimple web (1990s)

Dynamic web (since second-half 1990s)

Web as a platform (21st century)

Web 20 (since about 2006)

(Modern) Mobile Web (since about 2009)

16

Pre-Web Before there was the Web there was the Internet

TCPIP (Transmission Control ProtocolInternet 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

17

EVOLUTION OF THE WEB

15

Stages

Pre-web (before 1990)

Earlysimple web (1990s)

Dynamic web (since second-half 1990s)

Web as a platform (21st century)

Web 20 (since about 2006)

(Modern) Mobile Web (since about 2009)

16

Pre-Web Before there was the Web there was the Internet

TCPIP (Transmission Control ProtocolInternet 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

17

Stages

Pre-web (before 1990)

Earlysimple web (1990s)

Dynamic web (since second-half 1990s)

Web as a platform (21st century)

Web 20 (since about 2006)

(Modern) Mobile Web (since about 2009)

16

Pre-Web Before there was the Web there was the Internet

TCPIP (Transmission Control ProtocolInternet 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

17

Pre-Web Before there was the Web there was the Internet

TCPIP (Transmission Control ProtocolInternet 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

17

Early Web Simple Web

Invented by Sir Tim Berners-Lee 1989

It is a clientserver application for information and other services

Fundamental elements of the simple web

Web server

Browser

HTTP

File based URL

Static HTML

See slide 6

18

Dynamic Web

Dynamic web is enabled by processing

capabilities at both client side and server side

19

Static Dynamic

Web content Static HTML files A mixture of HTML scripts programming

codes executable programs etc

Web page

construction

Web pages are authored at

design time

Web pages are assembled at run time (on

the fly)

Content source Single source HTML file Multiple sources HTML files XML files

other files databases other websites etc

Web navigation

and interaction

mode

Click and read Rich interaction writetype choose move

slide drag and drop expand draw listen

speak etc

Development Web page authoring Web application development

Usage Commonly used for web

presence information

publishing etc for personal or

small business websites

Wide range of applications e-commerce

intranet business software e-learning

social networking system admin etc

Web as a Platform Web becomes a fundamental platform for multi-tier

enterprise information systems Independent site or UI a platform supporting various

applications Web technologies are commonly and intensively used not just for

websites 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

20

Web 20 A general and loose concept for recent advancements of the World Wide Web

Human behavior aspect of Web 20 Massive user participation contribution and sharing

User generated content idea opinion article message photo video news report courseware portfolio etc

Social connection networking interaction sharing Forum commenting community group SNS social media

Collective intelligence content aggregation crowdsourcing wisdom of the crowd Folksonomy social tagging

Social bookmarking recommendation reviewing rating

Collaborative filtering referencing

Collaborative editingauthoring Wiki

Rich user experience

Technical aspect of Web 20 Rich interaction more responsive and interactive brings desktop experience to the web

Flash Silverlight AJAX HTML 5

Mash-up Content and service aggregation and integration with structured data XML vs JSON

Web services SOAP vs REST

(Light weight) Web APIs

Emergence of application frameworks at different levels Programming frameworks application frameworks (CMS portal etc) UI frameworks

21

(Mordern) Mobile Web The popularity of iPhone and iPad pushed the

changes of web design on small screens and touch based interfaces

Mobile web refers to the access and use of websites and web applications using smart mobile devices (and optimized for these devices) through computer networks Particularly with a focus on user interfaces and

interactions

Its mainly about user experience but recently it has begun to impact the architecture

Overview of mobile web development httpwwwslidesharenetjgzhengmobile-web-

development-32003703

22

Web as a Platform Web becomes a fundamental platform for multi-tier

enterprise information systems Independent site or UI a platform supporting various

applications Web technologies are commonly and intensively used not just for

websites 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

20

Web 20 A general and loose concept for recent advancements of the World Wide Web

Human behavior aspect of Web 20 Massive user participation contribution and sharing

User generated content idea opinion article message photo video news report courseware portfolio etc

Social connection networking interaction sharing Forum commenting community group SNS social media

Collective intelligence content aggregation crowdsourcing wisdom of the crowd Folksonomy social tagging

Social bookmarking recommendation reviewing rating

Collaborative filtering referencing

Collaborative editingauthoring Wiki

Rich user experience

Technical aspect of Web 20 Rich interaction more responsive and interactive brings desktop experience to the web

Flash Silverlight AJAX HTML 5

Mash-up Content and service aggregation and integration with structured data XML vs JSON

Web services SOAP vs REST

(Light weight) Web APIs

Emergence of application frameworks at different levels Programming frameworks application frameworks (CMS portal etc) UI frameworks

21

(Mordern) Mobile Web The popularity of iPhone and iPad pushed the

changes of web design on small screens and touch based interfaces

Mobile web refers to the access and use of websites and web applications using smart mobile devices (and optimized for these devices) through computer networks Particularly with a focus on user interfaces and

interactions

Its mainly about user experience but recently it has begun to impact the architecture

Overview of mobile web development httpwwwslidesharenetjgzhengmobile-web-

development-32003703

22

Web 20 A general and loose concept for recent advancements of the World Wide Web

Human behavior aspect of Web 20 Massive user participation contribution and sharing

User generated content idea opinion article message photo video news report courseware portfolio etc

Social connection networking interaction sharing Forum commenting community group SNS social media

Collective intelligence content aggregation crowdsourcing wisdom of the crowd Folksonomy social tagging

Social bookmarking recommendation reviewing rating

Collaborative filtering referencing

Collaborative editingauthoring Wiki

Rich user experience

Technical aspect of Web 20 Rich interaction more responsive and interactive brings desktop experience to the web

Flash Silverlight AJAX HTML 5

Mash-up Content and service aggregation and integration with structured data XML vs JSON

Web services SOAP vs REST

(Light weight) Web APIs

Emergence of application frameworks at different levels Programming frameworks application frameworks (CMS portal etc) UI frameworks

21

(Mordern) Mobile Web The popularity of iPhone and iPad pushed the

changes of web design on small screens and touch based interfaces

Mobile web refers to the access and use of websites and web applications using smart mobile devices (and optimized for these devices) through computer networks Particularly with a focus on user interfaces and

interactions

Its mainly about user experience but recently it has begun to impact the architecture

Overview of mobile web development httpwwwslidesharenetjgzhengmobile-web-

development-32003703

22

(Mordern) Mobile Web The popularity of iPhone and iPad pushed the

changes of web design on small screens and touch based interfaces

Mobile web refers to the access and use of websites and web applications using smart mobile devices (and optimized for these devices) through computer networks Particularly with a focus on user interfaces and

interactions

Its mainly about user experience but recently it has begun to impact the architecture

Overview of mobile web development httpwwwslidesharenetjgzhengmobile-web-

development-32003703

22

RECENT WEB TRENDS

23

Web Trend Web technologies and applications have been

advanced a lot in the Web 20 era especially in the past 5 years The change is happening in many areas and many new are emerging

Here we are trying to have a peek of the major trend from the following aspects Web content and data

User interface and interaction

Architecture and processing model

Frameworks

Web client

Web server

Web protocol

Web URL

24

Web Trend

Content and Data

HTML 5 is growing and being adopted fast even

if it is not completely standardized

httpenwikipediaorgwikiHTML5

More content formats are understood or directly

used by web client

Many are XML based XUL SVG SOAP etc

Light-weight data exchange formats are used more

and more often JSON

Contents are coming from multiple sources to

create mashups

25

Web Trend Web technologies and applications have been

advanced a lot in the Web 20 era especially in the past 5 years The change is happening in many areas and many new are emerging

Here we are trying to have a peek of the major trend from the following aspects Web content and data

User interface and interaction

Architecture and processing model

Frameworks

Web client

Web server

Web protocol

Web URL

24

Web Trend

Content and Data

HTML 5 is growing and being adopted fast even

if it is not completely standardized

httpenwikipediaorgwikiHTML5

More content formats are understood or directly

used by web client

Many are XML based XUL SVG SOAP etc

Light-weight data exchange formats are used more

and more often JSON

Contents are coming from multiple sources to

create mashups

25

Web Trend

Content and Data

HTML 5 is growing and being adopted fast even

if it is not completely standardized

httpenwikipediaorgwikiHTML5

More content formats are understood or directly

used by web client

Many are XML based XUL SVG SOAP etc

Light-weight data exchange formats are used more

and more often JSON

Contents are coming from multiple sources to

create mashups

25

Web Trend Interface and Interaction Rich user experience or interaction offers desktop like

experiences AJAX model revolutionizes the way of web application interactions

HTML 5 and APIs provides rich set of client side functionalities httplifehackercom5416100how-html5-will-change-the-way-you-use-the-web

Single-page web application is gaining popularity the web page acts as an application holder - httpenwikipediaorgwikiSingle-page_application

Multiple device experience Mobile is the trend touch based interactions

Responsive design is widely accepted httpmashablecom20121211responsive-web-design

Cross-screen experience is bring promoted httpsspeakerdeckcomcameronmollthe-cross-screen-experience-pitfalls-and-triumphs

Hybrid applications are developed using web technologies but deployed as native applications

26

Web Trend Architecture The traditional requestresponse cycle based processing models are become

asynchronized The typical server oriented architectures are shifting increasingly to integrating rich JavaScript front-ends with server template systems AJAX

httpenwikipediaorgwikiAjax_(programming)

httpwwwadaptivepathcomideasajax-new-approach-web-applications

It leads to more efficient and faster communications over the Internet A web application becomes less dependent on navigations between web pages A web page becomes more like an application holder that many tasks can be completed within the page (thus called the single-page web application) httpblogstartifactcompostsmodern-client-side-timeshtml

httpwwwsenchacomfilesmiscSencha-WP-Web-Applications-Come-of-Agepdf

Service oriented architecture enables application oriented web client (consumer) XML Web services

RESTful web services httpswwwibmcomdeveloperworkswebserviceslibraryws-restful

Distributed web components with UI httpwwwpolymer-projectorg

New web application architectures and models rise especially for the mobile environment Backend as a service httpenwikipediaorgwikiBackend_as_a_service

27

Web Trend

Frameworks Libraries APIs The web is growing into a world of APIs and frameworks

Promote consistency and standard

Promote knowledge transfer

Provide utility or productivity tools

Embodies best practices design patterns security coding efficiency etc

Provide a structuredorganized environment

New technologies enable increasing use of Web APIs httpwwwprogrammablewebcomapis

Rich client side programming frameworks enable the shifting to client side development A large base of JavaScript based libraries jQuery Ext_Js JSONP

Backbone etc httpenwikipediaorgwikiJavaScript_library

UI frameworks jQuery UI Sencha Bootstrap D3 etc

Plethora of application level frameworks and servers to support web application development CMS (WordPress SharePoint Drupal DNN) portal LMS etc

28

Web Trend Client Web browser is growing beyond just a browser to a

personal portal and even an application holder httpcubicle-hblogspotcom201311web-browser-

development-trendhtml

Web client is growing beyond browser in the context of mobile computing Any other application with a rendering engine can be a

client

Hybrid application is growing fast httpwwwidownloadblogcom20130204gartner-mobile-

apps-2016

Web client is growing beyond user oriented client in the context of service oriented computing Web services

29

Web Trend Server Web servers are deeply integrated with application

servers One server handles all multiple distributed and specialized

servers

httpenwikipediaorgwikiApplication_server

Application servers are growing App market will be $36 trillion by 2019

httpwwwresearchandmarketscomresearch79f9k7application

Global Application Server market to grow at a CAGR of 2195 percent over the period 2013-2018 httpwwwresearchmozusglobal-application-server-market-2014-2018-reporthtml

Application servers are moving into cloud Server as a service backend as a service

30

Web Trend Protocol

HTTP is supporting or working with other protocols

More application level protocols on top of HTTP SOAP httpenwikipediaorgwikiSOAP

SAML httpenwikipediaorgwikiSecurity_Assertion_Markup_Language

SPDY is the starting point of HTTP 20 httpenwikipediaorgwikiSPDY

WebSocket provides full-duplex communication channel httpenwikipediaorgwikiWebSocket

31

Web Trend URL

URL is becoming more virtual

Like an entry point for dynamic resources

The interpretation of URL is done by web servers or

application servers

It can leads to a file a generated web page a script

a service or a command

httpenwikipediaorgwikiRewrite_engine

httpcodingsmashingmagazinecom20111102intr

oduction-to-url-rewriting

32

Knowledge and Skill Areas (Partial List) Web application development

Server side programming ASPNet PHP Java

Database

XML

DHTML JavaScript jQuery HTML5

AJAX JSON

Web services APIs REST

Architecture MVC

IDE

Application frameworks JavaScript libraries

CMS

Web portal

Mobile web development UI Design

Mobile frameworks

Hybrids

Web design (frontend design) and multimedia processing HTMLCSS

Imagevideo processing

Presentation and layout design

Usability and accessibility

Information architecture navigation

Frameworks

33

We security PKI

Encryption

Authentication

OWASP Top 10

Web engineering Methodology

Analysis

Modeling

Testing Debugging

Design patterns

Information architecture

Version control

Web admin and management Website performance

DNS

Web server admin

Web analytics

SEO

Business applications Intranet portal

Content management

Social media

Advertising and marketing

Summary

This lecture notes provides a summary of the fundamental technologies and the evolution of the web If you find some gaps in understanding of the

fundamentals please follow the readings and additional references in the lecture notes to refresh your knowledge

It also surveys the trend of web and some related topics The survey covers a wide range of concepts technologies and applications some of which will be covered with more details in other modules You do not need to worry if you have little experience with

some of these topics

34

Summary

This lecture notes provides a summary of the fundamental technologies and the evolution of the web If you find some gaps in understanding of the

fundamentals please follow the readings and additional references in the lecture notes to refresh your knowledge

It also surveys the trend of web and some related topics The survey covers a wide range of concepts technologies and applications some of which will be covered with more details in other modules You do not need to worry if you have little experience with

some of these topics

34