Web Technology and Application Landscape
Upcoming SlideShare
Loading in...5
×
 

Web Technology and Application Landscape

on

  • 4,654 views

An overview of the web field in my advanced web courses.

An overview of the web field in my advanced web courses.

Statistics

Views

Total Views
4,654
Views on SlideShare
4,567
Embed Views
87

Actions

Likes
0
Downloads
7
Comments
0

6 Embeds 87

http://jackzheng.net 69
http://it6753.blogspot.com 12
http://it6753.blogspot.ie 2
http://www.slideee.com 2
http://educate.spsu.edu 1
http://it6753.blogspot.ru 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web Technology and Application Landscape Web Technology and Application Landscape Presentation Transcript

  • Web Technologies and Applications an Overview/Review of the Technology Landscape IT 6753 Advanced Web Concepts and Applications Jack G. Zheng Spring 2014
  • Overview  Fundamental technology components  Evolution and trend  Field topic survey 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  An Internet application based on the HTTP protocol  A client/server application for information and services  The difference?  http://www.diffen.com/difference/Internet_vs_World_ Wide_Web 3 View slide
  • 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 systems/applications.  Web application: a specific functionality-oriented component that utilizes web technologies to deliver information and services to users or other applications/information systems.  A web information system usually consists of one or more web applications, together with information components and other non-web components.  Webware: usually refers to 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 applications/information systems.  Web framework: a framework provides a set of foundations and tools to support additional development for a complete application. 4 View slide
  • Key Technology Components  Client/server  Client/consumer: presentation/UI  Server  Communication protocol  Addressing  Data/content format  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 http://spsu.edu/index.html Web client: browser HTTP - Request DNS server(s)
  • Content/Presentation  HTML is a standard markup language to describe a web document/page 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 4.01 and version 5 is still under development  Are HTML applications web application? – not necessarily, examples:  Local .htm/.html 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 used together with HTML.  Other content format  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 7
  • Client  Web browser is the most popular web client with comprehensive UI features  Web browser products and market share  http://en.wikipedia.org/wiki/Usage_share_of_web_browsers  http://gs.statcounter.com/  http://www.netmarketshare.com  Browser/rendering engine: the core part that handles the markups, scripts, and other client processing – 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 a web client  Embedded browser in a native application: Visual Studio, mobile app, etc.  Specific programs: cURL, wget, etc.  Hybrid applications that is a web service consumer 8
  • Servers  A web server handles HTTP protocol at the server side  Major web server products  Apache, IIS, Nginx (a new popular one)  Market share data  http://w3techs.com/technologies/overview/web_server/all  http://news.netcraft.com/  A basic web server does not have additional processing capabilities. This is usually complemented by web server extensions or modules (e.g. PHP)  Extends web server capabilities to handle advanced processing  More specialized servers  Database servers  Complementing file systems for content management  Application servers enrich and scale web applications  Web server extensions or application servers add programming capabilities: ASP, ASP.Net, JSP, JSF, Servlet, PHP, ColdFusion, etc.  Provide advances features like session, transaction, security, etc.  Others: LDAP, Email, etc. 9
  • 10 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: ASP, ASP.Net, JSP, JSF, Servlet, PHP, ColdFusion, etc. Generated Content (HTML, CSS, JavaScript etc.)
  • HTTP  HTTP (Hypertext Transfer Protocol) is the feature communication protocol for the web  Features  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 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  http://web-sniffer.net  HTTP status codes  http://en.wikipedia.org/wiki/List_of_HTTP_status_codes 11
  • Addressing and URL (Uniform Resource Locator)  URL is used to locate a particular resource on a web server  A standard in IETF RFC 1630.  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  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 (http://www.icann.org) and IANA (http://www.iana.org)  Check IP and domain name online http://cqcounter.com/whois/  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) 12
  • Processing  Processing capabilities enhance the web from an application aspect  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.  At the server side  CGI: http://en.wikipedia.org/wiki/Common_Gateway_Interface  Web server extensions or application servers: ASP, ASP.Net, JSP, JSF, Servlet, PHP, Perl, ColdFusion, etc. 13
  • Major Server Side Platforms 14 .Net Java Other Framework ASP.Net Servlet, JSP, JSF, etc. CGI, Perl, PHP, 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 www.craigslist.org www.wikipedia.org spsu.edu
  • EVOLUTION OF THE WEB 15
  • 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 2009) 16
  • Pre-Web  Before there was the Web, there was the Internet  TCP/IP (Transmission Control Protocol/Internet Protocol) architecture  Internet Applications  Usenet, BBS, Telnet  Email, FTP  Web  P2P  Video streaming  Instant messaging, VoIP  Gaming  Which one generates the most traffic volume on the Internet?  Answer form: ipoque, Cisco, Sandvine 17
  • 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  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: write/type, 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 2.0  A general and loose concept for recent advancements of the World Wide Web  Human behavior aspect of Web 2.0:  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 editing/authoring, Wiki  Rich user experience  Technical aspect of Web 2.0  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 Will cover more in this course
  • 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.  It's mainly about user experience, but recently it has begun to impact the architecture. 22 Will cover more in this course
  • WEB TREND 23
  • Web Trend  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 presentation  User interface and interaction  Web client  Web server  Web protocol  Web URL  Architecture and processing model  Frameworks 24
  • Web Trend: Content and Presentation  HTML 5 is growing and being adopted fast even if it is not completely standardized  http://en.wikipedia.org/wiki/HTML5  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 often: JSON  Contents are coming from multiple sources to create mashups. 25
  • Web Trend: Interface and Interaction  Rich 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 http://lifehacker.com/5416100/how- html5-will-change-the-way-you-use-the-web  Mobile is the trend  Responsive design is gaining popularity http://mashable.com/2012/12/11/responsive-web- design/ 26
  • 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 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  http://www.idownloadblog.com/2013/02/04/gartner-mobile- apps-2016/  Web client is growing beyond user oriented client in the context of service oriented computing  Web services 27
  • 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/applicati on  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 28
  • Web Trend: Protocol  HTTP is supporting or working with other protocols  More application level protocols on top of HTTP  SOAP http://en.wikipedia.org/wiki/SOAP  SAML http://en.wikipedia.org/wiki/Security_Assertion_Markup_L anguage  SPDY is the starting point of HTTP 2.0  http://en.wikipedia.org/wiki/SPDY  WebSocket provides full-duplex communication channel  http://en.wikipedia.org/wiki/WebSocket 29
  • 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  http://en.wikipedia.org/wiki/Rewrite_engine  http://coding.smashingmagazine.com/2011/11/02/intr oduction-to-url-rewriting/ 30
  • 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.  http://blog.startifact.com/posts/modern-client-side-times.html  http://www.sencha.com/files/misc/Sencha-WP-Web-Applications-Come-of-Age.pdf  Service oriented architecture enables application oriented web client (consumer)  Web services  RESTful: https://www.ibm.com/developerworks/webservices/library/ws-restful/  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 31
  • Web Trend: Libraries, APIs, and Frameworks  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  Rich client side programming frameworks enable the shifting to client side development  jQuery, JSONP, etc. http://en.wikipedia.org/wiki/JavaScript_library  UI frameworks: jQuery UI, Sencha, Bootstrap, etc.  Plethora of application level frameworks and servers to support web application development  CMS, portal, LMS, etc.  New technologies enable increasing use of Web APIs  http://www.programmableweb.com/apis 32
  • Fields and Topics – Partial List  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  Web design (frontend design) and multimedia processing  HTML/CSS  Image/video processing  Presentation and layout design  Usability and accessibility  Information architecture, navigation  Frameworks  Mobile web development  UI Design  Mobile frameworks  Hybrids  Application frameworks  CMS  Web portal 33  We application security  PKI  Encryption  Authentication  Web analytics  Web engineering  Methodology  Analysis  Modeling  Testing, Debugging  Design patterns  Information architecture  Version control  Web admin and management  Website performance  DNS  Web server admin  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 later modules.  You do not need to worry if you have little experience with some of these topics. 34