SlideShare ist ein Scribd-Unternehmen logo
1 von 35
Downloaden Sie, um offline zu lesen
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
EVOLUTION OF THE WEB
3
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
RECENT WEB TRENDS
21
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

Weitere ähnliche Inhalte

Was ist angesagt?

Building Converged Plantwide Ethernet
Building Converged Plantwide EthernetBuilding Converged Plantwide Ethernet
Building Converged Plantwide EthernetRockwell Automation
 
Software Defined Network (SDN)
Software Defined Network (SDN)Software Defined Network (SDN)
Software Defined Network (SDN)Ahmed Ayman
 
SDN: an introduction
SDN: an introductionSDN: an introduction
SDN: an introductionLuca Profico
 
FireSIGHT Management Center (FMC) slides
FireSIGHT Management Center (FMC) slidesFireSIGHT Management Center (FMC) slides
FireSIGHT Management Center (FMC) slidesAmy Gerrie
 
Linux System Monitoring
Linux System Monitoring Linux System Monitoring
Linux System Monitoring PriyaTeli
 
SDN Basics – What You Need to Know about Software-Defined Networking
SDN Basics – What You Need to Know about Software-Defined NetworkingSDN Basics – What You Need to Know about Software-Defined Networking
SDN Basics – What You Need to Know about Software-Defined NetworkingSDxCentral
 
intel Sync. & Edge Solution udpate xEng-v1.0.pptx
intel Sync. & Edge Solution udpate xEng-v1.0.pptxintel Sync. & Edge Solution udpate xEng-v1.0.pptx
intel Sync. & Edge Solution udpate xEng-v1.0.pptxAlex Wooram Kim
 
Rules Programming tutorial
Rules Programming tutorialRules Programming tutorial
Rules Programming tutorialSrinath Perera
 
Docker, Konteyner Teknolojisi Nedir? Docker Güvenliği Nasıl Sağlanır?
Docker, Konteyner Teknolojisi Nedir? Docker Güvenliği Nasıl Sağlanır?Docker, Konteyner Teknolojisi Nedir? Docker Güvenliği Nasıl Sağlanır?
Docker, Konteyner Teknolojisi Nedir? Docker Güvenliği Nasıl Sağlanır?BGA Cyber Security
 
Software Defined Network - SDN
Software Defined Network - SDNSoftware Defined Network - SDN
Software Defined Network - SDNVenkata Naga Ravi
 
Bluetooth low energy
Bluetooth low energyBluetooth low energy
Bluetooth low energySaptadeep Pal
 
MikroTik Security
MikroTik SecurityMikroTik Security
MikroTik SecurityRofiq Fauzi
 
Malware and Modern Propagation Techniques
Malware and Modern Propagation TechniquesMalware and Modern Propagation Techniques
Malware and Modern Propagation TechniquesJoseph Bugeja
 

Was ist angesagt? (20)

Building Converged Plantwide Ethernet
Building Converged Plantwide EthernetBuilding Converged Plantwide Ethernet
Building Converged Plantwide Ethernet
 
Software Defined Network (SDN)
Software Defined Network (SDN)Software Defined Network (SDN)
Software Defined Network (SDN)
 
pfSense 2.0 Eğitim Sunumu
pfSense 2.0 Eğitim SunumupfSense 2.0 Eğitim Sunumu
pfSense 2.0 Eğitim Sunumu
 
Introduction to Software Defined Networking (SDN)
Introduction to Software Defined Networking (SDN)Introduction to Software Defined Networking (SDN)
Introduction to Software Defined Networking (SDN)
 
SDN: an introduction
SDN: an introductionSDN: an introduction
SDN: an introduction
 
Port forwarding
Port forwardingPort forwarding
Port forwarding
 
FireSIGHT Management Center (FMC) slides
FireSIGHT Management Center (FMC) slidesFireSIGHT Management Center (FMC) slides
FireSIGHT Management Center (FMC) slides
 
Linux System Monitoring
Linux System Monitoring Linux System Monitoring
Linux System Monitoring
 
Proxy server
Proxy serverProxy server
Proxy server
 
Cloud Computing Essentials
Cloud Computing EssentialsCloud Computing Essentials
Cloud Computing Essentials
 
SDN Basics – What You Need to Know about Software-Defined Networking
SDN Basics – What You Need to Know about Software-Defined NetworkingSDN Basics – What You Need to Know about Software-Defined Networking
SDN Basics – What You Need to Know about Software-Defined Networking
 
intel Sync. & Edge Solution udpate xEng-v1.0.pptx
intel Sync. & Edge Solution udpate xEng-v1.0.pptxintel Sync. & Edge Solution udpate xEng-v1.0.pptx
intel Sync. & Edge Solution udpate xEng-v1.0.pptx
 
Rules Programming tutorial
Rules Programming tutorialRules Programming tutorial
Rules Programming tutorial
 
Ha nam
Ha namHa nam
Ha nam
 
Docker, Konteyner Teknolojisi Nedir? Docker Güvenliği Nasıl Sağlanır?
Docker, Konteyner Teknolojisi Nedir? Docker Güvenliği Nasıl Sağlanır?Docker, Konteyner Teknolojisi Nedir? Docker Güvenliği Nasıl Sağlanır?
Docker, Konteyner Teknolojisi Nedir? Docker Güvenliği Nasıl Sağlanır?
 
Software Defined Network - SDN
Software Defined Network - SDNSoftware Defined Network - SDN
Software Defined Network - SDN
 
Bluetooth low energy
Bluetooth low energyBluetooth low energy
Bluetooth low energy
 
Apache ppt
Apache pptApache ppt
Apache ppt
 
MikroTik Security
MikroTik SecurityMikroTik Security
MikroTik Security
 
Malware and Modern Propagation Techniques
Malware and Modern Propagation TechniquesMalware and Modern Propagation Techniques
Malware and Modern Propagation Techniques
 

Andere mochten auch

KSU IT4983 Capstone Projects Report 2017 Update
KSU IT4983 Capstone Projects Report 2017 UpdateKSU IT4983 Capstone Projects Report 2017 Update
KSU IT4983 Capstone Projects Report 2017 UpdateJack Zheng
 
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/Jack Zheng
 
Web navigation systems for information seeking (updated in Feb 2015)
Web navigation systems for information seeking (updated in Feb 2015)Web navigation systems for information seeking (updated in Feb 2015)
Web navigation systems for information seeking (updated in Feb 2015)Jack Zheng
 
SDLC 101 Cartoon
SDLC 101 CartoonSDLC 101 Cartoon
SDLC 101 CartoonJack Zheng
 
NOSQL Overview, Neo4j Intro And Production Example (QCon London 2010)
NOSQL Overview, Neo4j Intro And Production Example (QCon London 2010)NOSQL Overview, Neo4j Intro And Production Example (QCon London 2010)
NOSQL Overview, Neo4j Intro And Production Example (QCon London 2010)Emil Eifrem
 
Building DotNetNuke Modules
Building DotNetNuke ModulesBuilding DotNetNuke Modules
Building DotNetNuke ModulesEngage Software
 
Information system a system view
Information system a system viewInformation system a system view
Information system a system viewJack Zheng
 
Chapter 1 - Web Design
Chapter 1 - Web DesignChapter 1 - Web Design
Chapter 1 - Web Designtclanton4
 
Multidimensional Perceptual Map for Project Prioritization and Selection - 20...
Multidimensional Perceptual Map for Project Prioritization and Selection - 20...Multidimensional Perceptual Map for Project Prioritization and Selection - 20...
Multidimensional Perceptual Map for Project Prioritization and Selection - 20...Jack Zheng
 
Mobile architecture overview
Mobile architecture overviewMobile architecture overview
Mobile architecture overviewDavid Scruggs
 
Semantic Web Landscape 2009
Semantic Web Landscape 2009Semantic Web Landscape 2009
Semantic Web Landscape 2009LeeFeigenbaum
 
Web Application Development Process presented by @Cygnismedia
Web Application Development Process presented by @CygnismediaWeb Application Development Process presented by @Cygnismedia
Web Application Development Process presented by @CygnismediaClark Davidson
 
Web application presentation
Web application presentationWeb application presentation
Web application presentationEhsan Ullah Kakar
 
Introduction to Modern and Emerging Web Technologies
Introduction to Modern and Emerging Web TechnologiesIntroduction to Modern and Emerging Web Technologies
Introduction to Modern and Emerging Web TechnologiesSuresh Patidar
 
Web Application Development
Web Application DevelopmentWeb Application Development
Web Application DevelopmentWhytespace Ltd.
 
Software Architecture: Trends
Software Architecture: TrendsSoftware Architecture: Trends
Software Architecture: TrendsHenry Muccini
 
In-Memory Computing Webcast. Market Predictions 2017
In-Memory Computing Webcast. Market Predictions 2017In-Memory Computing Webcast. Market Predictions 2017
In-Memory Computing Webcast. Market Predictions 2017SingleStore
 

Andere mochten auch (20)

KSU IT4983 Capstone Projects Report 2017 Update
KSU IT4983 Capstone Projects Report 2017 UpdateKSU IT4983 Capstone Projects Report 2017 Update
KSU IT4983 Capstone Projects Report 2017 Update
 
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
Mobile Web Overview https://www.edocr.com/v/k52p5vj4/
 
Web navigation systems for information seeking (updated in Feb 2015)
Web navigation systems for information seeking (updated in Feb 2015)Web navigation systems for information seeking (updated in Feb 2015)
Web navigation systems for information seeking (updated in Feb 2015)
 
SDLC 101 Cartoon
SDLC 101 CartoonSDLC 101 Cartoon
SDLC 101 Cartoon
 
NOSQL Overview, Neo4j Intro And Production Example (QCon London 2010)
NOSQL Overview, Neo4j Intro And Production Example (QCon London 2010)NOSQL Overview, Neo4j Intro And Production Example (QCon London 2010)
NOSQL Overview, Neo4j Intro And Production Example (QCon London 2010)
 
Building DotNetNuke Modules
Building DotNetNuke ModulesBuilding DotNetNuke Modules
Building DotNetNuke Modules
 
Information system a system view
Information system a system viewInformation system a system view
Information system a system view
 
Web engineering
Web engineeringWeb engineering
Web engineering
 
Chapter 1 - Web Design
Chapter 1 - Web DesignChapter 1 - Web Design
Chapter 1 - Web Design
 
Multidimensional Perceptual Map for Project Prioritization and Selection - 20...
Multidimensional Perceptual Map for Project Prioritization and Selection - 20...Multidimensional Perceptual Map for Project Prioritization and Selection - 20...
Multidimensional Perceptual Map for Project Prioritization and Selection - 20...
 
CAPSTONE PROJECT
CAPSTONE PROJECTCAPSTONE PROJECT
CAPSTONE PROJECT
 
Mobile architecture overview
Mobile architecture overviewMobile architecture overview
Mobile architecture overview
 
Semantic Web Landscape 2009
Semantic Web Landscape 2009Semantic Web Landscape 2009
Semantic Web Landscape 2009
 
Web Application Development Process presented by @Cygnismedia
Web Application Development Process presented by @CygnismediaWeb Application Development Process presented by @Cygnismedia
Web Application Development Process presented by @Cygnismedia
 
Web application presentation
Web application presentationWeb application presentation
Web application presentation
 
Introduction to Modern and Emerging Web Technologies
Introduction to Modern and Emerging Web TechnologiesIntroduction to Modern and Emerging Web Technologies
Introduction to Modern and Emerging Web Technologies
 
Web Application Development
Web Application DevelopmentWeb Application Development
Web Application Development
 
Software Architecture: Trends
Software Architecture: TrendsSoftware Architecture: Trends
Software Architecture: Trends
 
HTTP & HTML & Web
HTTP & HTML & WebHTTP & HTML & Web
HTTP & HTML & Web
 
In-Memory Computing Webcast. Market Predictions 2017
In-Memory Computing Webcast. Market Predictions 2017In-Memory Computing Webcast. Market Predictions 2017
In-Memory Computing Webcast. Market Predictions 2017
 

Ähnlich wie Web Landscape - updated in Jan 2016

Web Architecture and Technologies
Web Architecture and TechnologiesWeb Architecture and Technologies
Web Architecture and TechnologiesFulvio Corno
 
Lecture1-Introduction to Web.pptx
Lecture1-Introduction to Web.pptxLecture1-Introduction to Web.pptx
Lecture1-Introduction to Web.pptxGIRISHKUMARBC1
 
Web technologies course, an introduction
Web technologies course, an introductionWeb technologies course, an introduction
Web technologies course, an introductionPiero Fraternali
 
introduction to Web system
introduction to Web systemintroduction to Web system
introduction to Web systemhashim102
 
Cloud Computing in Systems Programming Curriculum
Cloud Computing in Systems Programming CurriculumCloud Computing in Systems Programming Curriculum
Cloud Computing in Systems Programming CurriculumSteven Miller
 
1. web technology basics
1. web technology basics1. web technology basics
1. web technology basicsJyoti Yadav
 
Cs8591 Computer Networks - UNIT V
Cs8591 Computer Networks - UNIT VCs8591 Computer Networks - UNIT V
Cs8591 Computer Networks - UNIT Vpkaviya
 
IWMW 1998: Deploying new web technologies
IWMW 1998: Deploying new web technologiesIWMW 1998: Deploying new web technologies
IWMW 1998: Deploying new web technologiesIWMW
 
ICS 2203-WEB APPLICATION DEVELOPMENT-EDUC Y2S1_MATHCOMP.docx
ICS 2203-WEB APPLICATION DEVELOPMENT-EDUC Y2S1_MATHCOMP.docxICS 2203-WEB APPLICATION DEVELOPMENT-EDUC Y2S1_MATHCOMP.docx
ICS 2203-WEB APPLICATION DEVELOPMENT-EDUC Y2S1_MATHCOMP.docxMartin Mulwa
 
Introductiontowebarchitecture 090922221506-phpapp01
Introductiontowebarchitecture 090922221506-phpapp01Introductiontowebarchitecture 090922221506-phpapp01
Introductiontowebarchitecture 090922221506-phpapp01Maisha Price
 
Web Technologies Introduction to web technologies
Web Technologies Introduction to web technologiesWeb Technologies Introduction to web technologies
Web Technologies Introduction to web technologiesVigneshkumar Ponnusamy
 
Mobile and IBM Worklight Best Practices
Mobile and IBM Worklight Best PracticesMobile and IBM Worklight Best Practices
Mobile and IBM Worklight Best PracticesAndrew Ferrier
 

Ähnlich wie Web Landscape - updated in Jan 2016 (20)

Html
HtmlHtml
Html
 
dotNET_Overview.pdf
dotNET_Overview.pdfdotNET_Overview.pdf
dotNET_Overview.pdf
 
Web Architecture and Technologies
Web Architecture and TechnologiesWeb Architecture and Technologies
Web Architecture and Technologies
 
Lecture1-Introduction to Web.pptx
Lecture1-Introduction to Web.pptxLecture1-Introduction to Web.pptx
Lecture1-Introduction to Web.pptx
 
02 intro
02   intro02   intro
02 intro
 
Web technologies course, an introduction
Web technologies course, an introductionWeb technologies course, an introduction
Web technologies course, an introduction
 
introduction to Web system
introduction to Web systemintroduction to Web system
introduction to Web system
 
introduction to web application development
introduction to web application developmentintroduction to web application development
introduction to web application development
 
Cloud Computing in Systems Programming Curriculum
Cloud Computing in Systems Programming CurriculumCloud Computing in Systems Programming Curriculum
Cloud Computing in Systems Programming Curriculum
 
1. web technology basics
1. web technology basics1. web technology basics
1. web technology basics
 
Cs8591 Computer Networks - UNIT V
Cs8591 Computer Networks - UNIT VCs8591 Computer Networks - UNIT V
Cs8591 Computer Networks - UNIT V
 
WP Chap 1 & 2.pptx
WP Chap 1 & 2.pptxWP Chap 1 & 2.pptx
WP Chap 1 & 2.pptx
 
IWMW 1998: Deploying new web technologies
IWMW 1998: Deploying new web technologiesIWMW 1998: Deploying new web technologies
IWMW 1998: Deploying new web technologies
 
world wide web
world wide webworld wide web
world wide web
 
ICS 2203-WEB APPLICATION DEVELOPMENT-EDUC Y2S1_MATHCOMP.docx
ICS 2203-WEB APPLICATION DEVELOPMENT-EDUC Y2S1_MATHCOMP.docxICS 2203-WEB APPLICATION DEVELOPMENT-EDUC Y2S1_MATHCOMP.docx
ICS 2203-WEB APPLICATION DEVELOPMENT-EDUC Y2S1_MATHCOMP.docx
 
Introductiontowebarchitecture 090922221506-phpapp01
Introductiontowebarchitecture 090922221506-phpapp01Introductiontowebarchitecture 090922221506-phpapp01
Introductiontowebarchitecture 090922221506-phpapp01
 
Web Technologies Introduction to web technologies
Web Technologies Introduction to web technologiesWeb Technologies Introduction to web technologies
Web Technologies Introduction to web technologies
 
Mobile and IBM Worklight Best Practices
Mobile and IBM Worklight Best PracticesMobile and IBM Worklight Best Practices
Mobile and IBM Worklight Best Practices
 
Web Browsers.pptx
Web Browsers.pptxWeb Browsers.pptx
Web Browsers.pptx
 
Tech talk php_cms
Tech talk php_cmsTech talk php_cms
Tech talk php_cms
 

Kürzlich hochgeladen

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 

Kürzlich hochgeladen (20)

COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 

Web Landscape - updated in Jan 2016

  • 1. 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
  • 2. 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
  • 4. 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
  • 5. 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.
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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.
  • 13. 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.)
  • 14. 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
  • 15. 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
  • 16. 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
  • 17. Multi-Tier/Layer Web Applications • Two tier • Three tier • Four tier 17 http://msdn.microsoft.com/en-us/library/ee658109.aspx
  • 18. 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
  • 19. (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
  • 20. 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
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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
  • 26. 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
  • 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 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
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. 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