Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • As a developer, which browser do you prefer?
  • As a developer, which browser do you prefer?
  • Web 2.0
  • Massive participation, sharing and collaboration Content created by users; Content from multiple sources;
  • Social websites will be united Browser can become more versatile More gadgets than pages 3D Fusion with other software and hardware Web in TV, video, game, etc. More applications will become a mixture of online and offline
  • Ggc

    1. 1. Introduction to the Web and Web Applications Teaching Presentation at Georgia Gwinnett College Jack G. Zheng Feb 20 th 2009
    2. 2. Agenda <ul><li>What is the web? What is web application? </li></ul><ul><li>How does it work? </li></ul><ul><li>Evolution of the web and web applications </li></ul><ul><ul><li>Pre-web (before 1990) </li></ul></ul><ul><ul><li>Early web (1990s) </li></ul></ul><ul><ul><li>Dynamic web (since second-half 1990s) </li></ul></ul><ul><ul><li>Current web (21 st century) </li></ul></ul>
    3. 3. Pre-Web <ul><li>Before there was the Web, there was the Internet </li></ul><ul><li>Internet Applications </li></ul><ul><ul><li>Usenet, BBS, Telnet </li></ul></ul><ul><ul><li>Email, FTP </li></ul></ul><ul><ul><li>Web </li></ul></ul><ul><ul><li>(More recently) </li></ul></ul><ul><ul><li>P2P </li></ul></ul><ul><ul><li>Video streaming </li></ul></ul><ul><ul><li>Instant messaging, VoIP </li></ul></ul><ul><ul><li>Gaming </li></ul></ul><ul><li>Which one generates the most traffic volume on the Internet? </li></ul><ul><ul><li>Answer form: ipoque , Cisco , Sandvine </li></ul></ul>
    4. 4. Early Web, Simple Web <ul><li>Sir Tim Berners-Lee, 1989 </li></ul><ul><li>A client/server application for information and other services </li></ul><ul><li>Fundamental elements of web applications </li></ul><ul><ul><li>Web server </li></ul></ul><ul><ul><li>Web client: browser </li></ul></ul><ul><ul><li>Web content: HTML (hypertext markup language) </li></ul></ul><ul><ul><li>Web protocol: HTTP (hypertext transfer protocol) </li></ul></ul><ul><ul><li>Web address: URL (uniform resource locator) </li></ul></ul>
    5. 5. Simple Web Architecture The Internet HTTP URL Browser (Internet Explorer, Firefox, etc.) Web server HTML Files
    6. 6. How does it work? <ul><li>What happens after a URL is entered in the web browser? </li></ul><ul><ul><li> </li></ul></ul>DNS server(s) 1. Looking for the IP of the domain “” 2. Returning the IP of the domain: 3. Sending an HTTP request to 5. Sending an HTTP response back 4. Looking for the file “/teaching/cis2010su2005/coursework.htm”
    7. 7. Simple Web Applications <ul><li>Document based web application </li></ul><ul><ul><li>Simple, small and fast </li></ul></ul><ul><li>Web presence, information publishing </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul>
    8. 8. Dynamic Web <ul><li>Static  dynamic </li></ul><ul><ul><li>Web pages are constructed at design time  at run time </li></ul></ul><ul><ul><li>HTML files  a mixture of HTML, scripts, programming codes, executable programs, etc. </li></ul></ul><ul><ul><li>Content is from a single source  multiple sources (HTML files, XML files, other files, databases, other websites) </li></ul></ul><ul><li>Simple  complex </li></ul><ul><ul><li>Interaction mode: click and read  write/type, choose, move, slide, drag and drop, expand, draw, listen, speak, etc. </li></ul></ul><ul><ul><li>Development: Webpage authoring  web application development (web engineering) </li></ul></ul>
    9. 9. Dynamic Web Technology: Client Side (DHTML) <ul><li>Style sheet ( CSS ) </li></ul><ul><ul><li>Page style (color, size, position, etc.): website themes </li></ul></ul><ul><ul><li>Style change on events: link hover </li></ul></ul><ul><li>Scripting (JavaScript) </li></ul><ul><ul><li>Dynamic content: calendar </li></ul></ul><ul><ul><li>Dynamically changing content: dropdown menu </li></ul></ul><ul><ul><li>Simple animations: text animation </li></ul></ul><ul><li>Plug-ins </li></ul><ul><ul><li>Flash, Sliverlight, Java Applets </li></ul></ul><ul><ul><li> </li></ul></ul>
    10. 10. Dynamic Web Technology: Server Side <ul><li>Specialized servers </li></ul><ul><ul><li>Web server extensions or application servers </li></ul></ul><ul><ul><ul><li>Adding programming capabilities: ASP, ASP.Net, JSP, JSF, Servlet, PHP, ColdFusion, etc. </li></ul></ul></ul><ul><ul><li>Database servers </li></ul></ul><ul><ul><ul><li>Complementing file systems for content management </li></ul></ul></ul><ul><li>Dynamic pages: no longer stored in pure html </li></ul><ul><ul><li>Database populated: news site, portal, product catalog, directory, etc. </li></ul></ul><ul><ul><li>URL query string: product data </li></ul></ul><ul><ul><li>Acting on user input: web search, forum post, log in, etc. </li></ul></ul>
    11. 11. Dynamic Web Applications <ul><li>E-Commerce </li></ul><ul><ul><li>Shopping, banking, bidding, trading, etc. </li></ul></ul><ul><ul><li>Dot-com bubble </li></ul></ul><ul><li>Web search engine </li></ul><ul><li>Online news and magazines </li></ul><ul><li>Web portal </li></ul><ul><li>E-government </li></ul><ul><li>… </li></ul>
    12. 12. Current Web <ul><li>Web as a platform/infrastructure </li></ul><ul><ul><li>For enterprises and other organizations, web is becoming a fundamental piece of their information system </li></ul></ul><ul><li>Web 2.0 </li></ul><ul><ul><li>A general and loose concept for recent advancements of the World Wide Web </li></ul></ul>
    13. 13. Web as a Platform <ul><li>A fundamental platform for organizational information systems (company, enterprise, non-profit, government, college, community, etc.) </li></ul><ul><ul><li>Add-on  infrastructure/platform </li></ul></ul><ul><ul><li>Separate  integrated </li></ul></ul><ul><li>Enabling technologies </li></ul><ul><ul><li>Web services </li></ul></ul><ul><ul><li>Security infrastructure: SSL, PKI </li></ul></ul><ul><ul><li>Matured web application servers and frameworks: SharePoint, DotNetNuke, Drupal, Structs, CommunityServer, etc. </li></ul></ul>
    14. 14. Web 2.0 Applications <ul><li>Examples </li></ul><ul><ul><li>,,,,, </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>, Photoshop express, </li></ul></ul><ul><li>Buzz words </li></ul><ul><ul><li>Blog, Wiki, SNS, folksonomy, mash-up, web desktop </li></ul></ul>
    15. 15. Web 2.0 Technologies <ul><li>AJAX </li></ul><ul><ul><li>Enables new interaction model: Yahoo Finance </li></ul></ul><ul><ul><li>Enables new navigation model: Yahoo Mail, MyYahoo </li></ul></ul><ul><li>XML (family) </li></ul><ul><ul><li>Bringing structure and meaning, for easy aggregation and integration </li></ul></ul><ul><ul><li>RSS: ZDNet News to MyYahoo </li></ul></ul><ul><li>Web services and APIs </li></ul><ul><ul><li>Distributed, but integrated </li></ul></ul><ul><ul><li>Example: Google search API </li></ul></ul>
    16. 16. Summarizing Web Trend <ul><li>Web client </li></ul><ul><ul><li>Browser  any other application </li></ul></ul><ul><li>Web server </li></ul><ul><ul><li>One server handles all  multiple distributed and specialized servers </li></ul></ul><ul><li>Web content </li></ul><ul><ul><li>HTML  XML, XHTML, CSS, embedded content (Flash etc.), scripts </li></ul></ul><ul><li>Web protocol </li></ul><ul><ul><li>HTTP  working with other protocols (video streaming, email, etc.) </li></ul></ul><ul><li>Web URL </li></ul><ul><ul><li>Physical document  virtual entry point (resource identifier) </li></ul></ul>
    17. 17. Future … <ul><li>What do you anticipate? </li></ul><ul><ul><li>If you are a user … </li></ul></ul><ul><ul><li>If you are a developer … </li></ul></ul>
    18. 18. Summary <ul><li>Back to the opening </li></ul><ul><ul><li>What is the web (WWW)? </li></ul></ul><ul><ul><li>What is a web application? </li></ul></ul><ul><ul><ul><li>How do you classify an application as web application? </li></ul></ul></ul>
    19. 19. Key Concepts <ul><li>Internet, web, web application </li></ul><ul><li>HTML, HTTP, URL </li></ul><ul><li>Web server, browser </li></ul><ul><li>Domain, IP, DNS </li></ul><ul><li>XML, CSS, DHTML, AJAX </li></ul><ul><li>Web service, API </li></ul><ul><li>SSL, PKI </li></ul><ul><li>Web 2.0 </li></ul>