Web Landscape - updated in Jan 2016

Web Technologies, Applications,
Design and Development
an Overview of the Landscape and Trends
IT 4203: http://it4203.jackzheng.net
IT 6753: http://it6753.blogspot.com
Jack G. Zheng
Spring 2016
http://jackzheng.net/teaching

Overview
• Quick review
– Fundamental technology components of WWW
– The evolution stages of WWW
• What’s happening now
– Summary of recent advancements and trends in
web technologies and application development
2

Key Web Application Components
• Architecture: Client/Server
• Client: browser
• Server: web server
• Presentation/UI/content: HTML/CSS
• Communication protocol: HTTP
• Addressing: DNS, URL
• Processing
– Processing capabilities at the server or client side
4

Stages
Pre-web
(before 1990)
Early/simple web
(1990s)
Dynamic web
(since second-half
1990s)
Web as a platform
(21st century)
Web 2.0
(since about 2006)
Modern (Mobile) Web
(since about 2010)
5
* Note that each stage has not ended at this time. They
only signal the beginning of drastically new developments,
and their applications are still widely used today.

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?
– Cisco: http://www.cisco.com/c/en/us/solutions/collateral/service-
provider/visual-networking-index-vni/VNI_Hyperconnectivity_WP.html
– Sandvine: https://www.sandvine.com/trends/global-internet-phenomena/
6

Early Web, Simple Web
• Invented by Sir Tim Berners-Lee, 1989
• It is a client/server application for information
and other services
• Fundamental elements of the simple web
– Web server
– Browser
– HTTP
– (File-based) URL
– Static HTML
7

The
Internet
Fundamental Technologies in
a Simple Web Architecture
8
Web server HTML Files
HTTP - Response
URL
http://spsu.edu/index.html
Web client: browser
HTTP - Request
DNS server(s)
Communication
medium
Server side
Client side
• https://docs.webplatform.org/wiki/tutorials/How_does_the_Internet_work
• https://msdn.microsoft.com/library/bb330932.aspx

Content/Presentation
• HTML/CSS is the standard to present web content and UI to end
users
– HTML describes a web document/page using tags (markups)
– CSS takes the styling role from the original HTML
• Other UI formats
– XHTML: http://www.w3schools.com/html/html_xhtml.asp
– WML: http://en.wikipedia.org/wiki/Wireless_Markup_Language
– XUL: http://en.wikipedia.org/wiki/Xul
– More: http://en.wikipedia.org/wiki/User_interface_markup_language
• Data format
– Data format is not necessarily used for UI, but for data
representation and exchange/transfer purposes: XML, JSON.
9
Are all HTML pages web pages?
Not necessarily, examples:
• Local .htm/.html documents
• .mht - MIME HTML, a web page archive format,
which is used offline
• .chm - Microsoft Compiled HTML Help

Servers/Clients
• Major web server products (Apache, IIS, Nginx) and their market share
– http://w3techs.com/technologies/overview/web_server/all
– http://news.netcraft.com/
– http://www.w3cook.com/webserver/nginx
• Web browser products and market share
– http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
– http://www.w3counter.com/globalstats.php
– http://gs.statcounter.com/
– http://www.netmarketshare.com
• A basic web server does not have additional processing capabilities
– Complemented by web server extensions or modules (e.g. PHP) which add programming
capabilities to handle advanced processing
– More specialized servers used in multi-tier web applications
• Application servers enrich and scale web applications, with features like session, transaction,
security, etc.
• Database servers for data and content management
• Others: LDAP, Email, etc.
• Browser/rendering engine: the core part that handles the markups, scripts, and
other client processing – can be integrated into other programs
– http://en.wikipedia.org/wiki/Web_browser_engine
10

HTTP and Addressing
• HTTP (Hypertext Transfer Protocol) is the feature communication protocol for the web
– An application layer protocol typically running on top of TCP/IP
– A request-response cycle protocol
– Stateless - http://en.wikipedia.org/wiki/Stateless_protocol
• HTTP status codes
– http://en.wikipedia.org/wiki/List_of_HTTP_status_codes
• The World Wide Web’s 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
– File/resource local address: identified by local address pointer
• URL (Uniform Resource Locator) is used to locate a resource on a web server
– A standard in IETF RFC 1630.
– http://en.wikipedia.org/wiki/Uniform_resource_locator
• URL encoding http://en.wikipedia.org/wiki/Percent-encoding
• Domain Name System (DNS)
– A system that provides the conversion between IP addresses and domain names
– Top level domains are managed by ICANN (http://www.icann.org) and IANA (http://www.iana.org)
– Check IP and domain name online http://cqcounter.com/whois/
11

Dynamic Web
• Dynamic web is enabled by advanced
processing capabilities at both client side and
server side (especially the server side)
12
Simple/Static Dynamic
Overview Usually document (HTML files)
based web applications with
limited client scripting
Advanced processing is utilized at many levels
Technologies Client side: HTML, CSS Client side: CSS, JavaScript
Server side: PHP, Java, .Net, Database
Advantages Simple, small and fast Functional, versatile
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: write/type, choose, move, slide,
drag and drop, expand, draw, listen, speak, etc.

Server Side Complications
13
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:
ASP.Net, JSP, JSF, Servlet, PHP,
ColdFusion, etc.
Generated Content
(HTML, CSS,
JavaScript, XML, etc.)

Processing
• Processing capabilities enhance the web from an
application aspect
• At the server side
– CGI: http://en.wikipedia.org/wiki/Common_Gateway_Interface
– Web server extensions or application servers
– Major platforms: .Net (IIS, ASP.Net, Mono), Java EE
(Servlets, JSP, EJB, WebLogic, WebSphere), PHP(Zend),
ColdFusion, etc.
• At the client side
– DHTML: http://en.wikipedia.org/wiki/Dynamic_HTML
– CSS, JavaScript and various components and libraries:
XMLHttpRequest (AJAX), JQuery, etc.
– Browser plug-ins: Flash, Sliverlight, Java Applets, ActiveX,
embedded objects, etc.
14

Major Server Side Platforms
• Who uses what and market share
– https://wappalyzer.com/
– http://en.wikipedia.org/wiki/Programming_languages_used_in_most_popula
r_websites
– http://cubicle-h.blogspot.com/2010/07/who-uses-aspnet.html
– http://w3techs.com/technologies/overview/programming_language/all
15
.Net Java Other
Framework ASP.Net Servlet, JSP, JSF,
etc.
CGI, Perl, PHP,
Python,
ColdFusion
Example
sites
atlanta-airport.com
www.mariettaga.gov
newegg.com
monster.com
godaddy.com
atpworldtour.com
bankofamerica.com
ratemyprofessors.com
cnn.com
delta.com
dealsea.com
www.wikipedia.org
kennesaw.edu

Web as a Platform
• Mainly driven by the server side advancement, the web has
become a fundamental platform for all kinds of information
systems and applications
• From independent and separate site to a platform supporting and
integrating various applications
– Web technologies are commonly and intensively used, not just for
websites, but for all kinds of application and services.
– 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.
– Standard data exchange format and protocols
– Service Oriented Architecture and web services
– Cloud computing infrastructure
– Security infrastructure: SSL, PKI
16

Multi-Tier/Layer Web Applications
• Two tier
• Three tier
• Four tier
17 http://msdn.microsoft.com/en-us/library/ee658109.aspx

Web 2.0
• Web 2.0 does not refer to a specific version of the
Web, but rather a series of technology and
application improvements.
– http://techterms.com/definition/web20
• Web 2.0 greatly advanced the usage of web.
• Behavior aspect of Web 2.0:
– Massive user participation and contribution
– Social: connection, networking, interaction, sharing
– Collective intelligence: content aggregation,
crowdsourcing, wisdom of the crowd
• Technical aspect of Web 2.0
– Rich user experience: more responsive and interactive;
brings desktop experience to the web
• Flash, Silverlight, AJAX, HTML 5
– Openness and mash-up
• Content and service aggregation and integration with
structured data: XML vs. JSON
• Web services and (light weight) Web APIs
– Development of application frameworks at different
levels
• Programming frameworks, application frameworks (CMS,
portal, etc.), UI frameworks
18
Paul Anderson

(Mordern) Mobile Web
• The popularity of smart phone and tablets pushed the changes of web
design on small screens and touch based interfaces, and eventually the
application architecture.
• 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
• It's mainly about user experience, particularly with a focus on user
interfaces and interactions.
– Web sites: focus on the display of information adapted to the mobile device
– Web applications: focus on functional features, with UI specifically designed
for mobile devices
• It has begun to impact the architecture as well.
• Overview of mobile web development
– http://www.slideshare.net/jgzheng/mobile-web-development-32003703
19

Summary
Stage Time periods Features
Pre-web Before 1990 All kinds of protocols and interfaces
Early/simple web 1990s Document based information retrieval
Dynamic web Since second-half
1990s
Advanced dynamic processing on both
server and client side
Web as a platform 21st century A fundamental platform to support and
integrate multiple systems
Web 2.0 Since about 2006 Emerging of services and redefining
client/server communication style.
Modern (Mobile)
Web
Since about 2010 Major renovation of user experience
design.
Major client-side advancement.
20

Trends Summary
• Web technologies and applications have been
advanced a lot in the Web 2.0 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
22

Web Trend: Content and Data
• HTML 5 is growing and being adopted faster even before its final
publication in 2014
– http://en.wikipedia.org/wiki/HTML5
• More descriptive languages are understood and directly used by
web clients
– Many are XML based: XUL, SVG, SOAP, etc.
– Light-weight data exchange formats are used more and more often:
JSON http://www.json.org/xml.html
• Content is growing beyond just simple content
– WebGL, SVG, Canvas
• Contents are coming from multiple sources to create mashups
– http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)
– http://science.howstuffworks.com/innovation/repurposed-
inventions/5-web-mashups.htm
23

Web Trend: Interface and Interaction
• Rich user experience or interaction offers desktop like experiences
– JavaScript and libraries has been developed fast to return to the fat client
mode
– AJAX model revolutionizes the way of web application interactions
– HTML 5 and APIs provides rich set of client side functionalities
http://lifehacker.com/5416100/how-html5-will-change-the-way-you-use-the-
web
– Single-page web application is gaining popularity: the web page acts as an
application holder - http://en.wikipedia.org/wiki/Single-page_application
– Micro-interactions
• Multiple device experience
– Mobile is the trend: touch based interactions
– Responsive design is widely accepted
http://mashable.com/2012/12/11/responsive-web-design/
– Cross-screen experience is bring promoted
https://speakerdeck.com/cameronmoll/the-cross-screen-experience-pitfalls-
and-triumphs
– Hybrid applications are developed using web technologies but deployed as
native applications.
24

Proliferation of Modern UI Designs
• Microsoft Design (metro/modern) https://www.microsoft.com/en-
us/stories/design/
• Google Material Design
https://www.google.com/design/spec/material-
design/introduction.html
• SAP Fiori https://experience.sap.com/fiori/
• Oracle Alta
http://www.oracle.com/webfolder/ux/middleware/alta/index.html
• Zurb Motion UI http://zurb.com/playground/motion-ui
• Flat design
• http://thenextweb.com/dd/2015/07/24/6-design-trends-taking-
over-the-web/
25

Web Trend: Architecture
• The traditional request/response 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
• http://en.wikipedia.org/wiki/Ajax_(programming)
• http://www.adaptivepath.com/ideas/ajax-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).
• http://blog.startifact.com/posts/modern-client-side-times.html
• http://mobidev.biz/blog/3_types_of_web_application_architecture
• http://www.sencha.com/files/misc/Sencha-WP-Web-Applications-Come-of-Age.pdf
– Frameworks to enable traditional server side patterns to the client side
• AngularJS: http://en.wikipedia.org/wiki/AngularJS
• Service oriented architecture enables application oriented web client (consumer)
– XML Web services and RESTful web services:
https://www.ibm.com/developerworks/webservices/library/ws-restful/
– Micro-service: https://www.nginx.com/blog/introduction-to-microservices/
• Distributed web components with UI
– http://www.polymer-project.org
• New web application architectures and models rise especially for the mobile environment
– Backend as a service http://en.wikipedia.org/wiki/Backend_as_a_service
– Four tier by forester: http://nginx.com/blog/time-to-move-to-a-four-tier-application-architecture/
26

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 structured/organized environment
• New technologies enable increasing use of Web APIs
– http://www.programmableweb.com/apis
• Rich client side programming frameworks enable the shifting to client side
development
– A large base of JavaScript based libraries: jQuery, Ext_Js, Backbone, etc.
http://en.wikipedia.org/wiki/JavaScript_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), portal, etc.
27
http://w3techs.com/technologies/history_overview/
content_management/all/y

Web Trend: Client
• Web browser is growing beyond just a browser to a personal portal and
even an application holder
– http://cubicle-h.blogspot.com/2013/11/web-browser-development-trend.html
• Web application client is growing beyond browser
– http://www.pcmag.com/encyclopedia/term/54272/web-application
– Other types of web client: any application that can process HTTP as an
client can be view as a web client. Examples:
• 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.
– Hybrid mobile web application is growing fast:
http://www.idownloadblog.com/2013/02/04/gartner-mobile-apps-2016/
– Being mobile greatly expanded the form of web client and its capabilities to
interact with the real world
• Web client is growing beyond user oriented client in the context of
service oriented computing
28

Web Trend: Server
• Web servers are deeply integrated with application servers
– One server handles all  multiple distributed and specialized
servers
– http://en.wikipedia.org/wiki/Application_server
• Application servers are growing
– App market will be $36 trillion by 2019
http://www.researchandmarkets.com/research/79f9k7/application
– Global Application Server market to grow at a CAGR of 21.95
percent over the period 2013-2018
http://www.researchmoz.us/global-application-server-market-2014-
2018-report.html
• Application servers are moving into cloud
– Server as a service, backend as a service
• Rising of the event-driven server for real time web applications
– Node.js http://en.wikipedia.org/wiki/Node.js
29

Web Trend: Protocol
• HTTP is supporting or working with other
protocols
• SPDY is the starting point of HTTP 2.0
– http://en.wikipedia.org/wiki/SPDY
• More application level protocols on top of HTTP
– SOAP http://en.wikipedia.org/wiki/SOAP
– SAML
http://en.wikipedia.org/wiki/Security_Assertion_Mark
up_Language
• WebSocket provides full-duplex communication
channel
– http://en.wikipedia.org/wiki/WebSocket
30

Web Trend: URL
• 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)
• 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
– http://en.wikipedia.org/wiki/Rewrite_engine
– http://coding.smashingmagazine.com/2011/11/02/introduction-to-url-
rewriting/
• Short URL
– http://en.wikipedia.org/wiki/URL_shortening
31

Emerging Web Application Types
• The definition of web application is expanding. New
emerging applications may not rely on some traditional
web technology components any more.
• Offline web application
– http://alistapart.com/article/offline-first
• Hybrid web (mobile) application
– https://developer.salesforce.com/page/Native,_HTML5,_or_H
ybrid:_Understanding_Your_Mobile_Application_Developmen
t_Options
• Progressive web application
– https://infrequently.org/2015/06/progressive-apps-escaping-
tabs-without-losing-our-soul/
– http://arc.applause.com/2015/11/30/application-shell-
architecture/
32

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 trends of web and some
related topics. The survey covers a wide range
of concepts, technologies and applications.
– You should now know all those terms, but you do
not need to get a deep understanding of each topic
at this time.
– Find you interest and continue to explore.
33

Relevant Knowledge and Skill Areas
• Web application development
– Server side programming, ASP.Net, 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
– HTML/CSS
– Image/video processing
– Presentation and layout design
– Usability and accessibility
– Information architecture, navigation
– Frameworks
34
 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

Recommended General Resources
• https://www.webplatform.org
• http://www.w3.org
• http://w3techs.com
• http://thenextweb.com
• http://webtrends.about.com
• http://www.sitepoint.com/web/
• http://www.smashingmagazine.com
• http://webprofessionals.org
35

Web Landscape - updated in Jan 2016

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Web Landscape - updated in Jan 2016 (20)

Recently uploaded (20)

Web Landscape - updated in Jan 2016