Ggc

• 1. Introduction to the Web and Web Applications Teaching Presentationat Georgia Gwinnett College Jack G. Zheng Feb 20 th2009

2. Agenda

• What is the web? What is web application?

• How does it work?

• Evolution of the web and web applications

• • Pre-web (before 1990)

• • Early web (1990s)

• • Dynamic web (since second-half 1990s)

• • Current web (21 stcentury)

3. Pre-Web

• Before there was the Web, there was theInternet

• Internet Applications

• • Usenet, BBS, Telnet

• • Email, FTP

• • Web

• • (More recently)

• • P2P

• • Video streaming

• • Instant messaging, VoIP

• • Gaming

• Which one generates the most traffic volume on the Internet?

• • Answer form:ipoque ,Cisco ,Sandvine

4. Early Web, Simple Web

• SirTim Berners-Lee, 1989

• A client/server application for information and other services

• Fundamental elements of web applications

• • Web server

• • Web client: browser

• • Web content: HTML (hypertext markup language)

• • Web protocol: HTTP (hypertext transfer protocol)

• • Web address: URL (uniform resource locator)

5. Simple Web Architecture The Internet HTTP URL Browser(Internet Explorer, Firefox, etc.) Web serverHTML Files 6. How does it work?

• What happens after a URL is entered in the web browser?

• • http://gzheng.cis.gsu.edu/teaching/cis2010su2005/coursework.htm

DNSserver(s) 1. Looking for the IP of thedomaingzheng.cis.gsu.edu 2. Returning the IP of the domain: 131.96.101.1193. Sending anHTTP requestto 131.96.101.119 5. Sending anHTTP responseback 4. Looking for the file /teaching/cis2010su2005/coursework.htm 7. Simple Web Applications

• Document based web application

• • Simple, small and fast

• Web presence, information publishing

• • http://www.istanta.com/

• • http://www.atlantapetrescue.org

• • http://facultyweb.ggc.usg.edu/cpark/

• • http://desrist2009.ist.psu.edu/

• • http://www.useit.com/alertbox/

8. Dynamic Web

• Staticdynamic

• • Web pages are constructed at design timeat run time

• • HTML filesa mixture of HTML, scripts,programming codes, executable programs, etc.

• • Content is from a single sourcemultiple sources (HTML files, XML files, other files, databases, other websites)

• Simplecomplex

• • Interaction mode: click and readwrite/type, choose, move, slide, drag and drop, expand, draw, listen, speak, etc.

• • Development: Webpage authoringweb application development (web engineering)

9. Dynamic Web Technology:Client Side (DHTML)

• Style sheet ( CSS )

• • Page style (color, size, position, etc.):website themes

• • Style change on events:link hover

• Scripting (JavaScript)

• • Dynamic content:calendar

• • Dynamically changing content:dropdown menu

• • Simple animations:text animation

• Plug-ins

• • Flash, Sliverlight, Java Applets

• • http://kartoo.com

10. Dynamic Web Technology:Server Side

• Specialized servers

• • Web server extensions or application servers

• • • Adding programming capabilities: ASP, ASP.Net, JSP, JSF, Servlet, PHP, ColdFusion, etc.

• • Database servers

• • • Complementing file systems for content management

• Dynamic pages: no longer stored in pure html

• • Database populated: news site, portal, product catalog, directory, etc.

• • URL query string:product data

• • Acting on user input: web search, forum post, log in, etc.

11. Dynamic Web Applications

• E-Commerce

• • Shopping, banking, bidding, trading, etc.

• • Dot-com bubble

• Web search engine

• Online news and magazines

• Web portal

• E-government

12. Current Web

• Web as a platform/infrastructure

• • For enterprises and other organizations, web is becoming a fundamental piece of their information system

• Web 2.0

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

13. Web as a Platform

• A fundamental platform for organizational information systems (company, enterprise, non-profit, government, college, community, etc.)

• • Add-oninfrastructure/platform

• • Separateintegrated

• Enabling technologies

• • Web services

• • Security infrastructure: SSL, PKI

• • Matured web application servers and frameworks: SharePoint, DotNetNuke, Drupal, Structs, CommunityServer, etc.

14. Web 2.0 Applications

• Examples

• • youtube.com, myspace.com, ireport.com,blogspot.com, yelp.com,

• • wikipedia.org

• • delicious.com

• • housingmaps.com

• • maps.google.com, Photoshop express, eyeos.info

• Buzz words

• • Blog, Wiki, SNS, folksonomy, mash-up, web desktop

15. Web 2.0 Technologies

• AJAX

• • Enables new interaction model:Yahoo Finance

• • Enables new navigation model: Yahoo Mail, MyYahoo

• XML (family)

• • Bringing structure and meaning, for easy aggregation and integration

• • RSS:ZDNet Newsto MyYahoo

• Web services and APIs

• • Distributed, but integrated

• • Example:Google search API

16. Summarizing Web Trend

• Web client

• • Browserany other application

• Web server

• • One server handles allmultiple distributed and specialized servers

• Web content

• • HTMLXML, XHTML, CSS, embedded content (Flash etc.), scripts

• Web protocol

• • HTTPworking with other protocols (video streaming, email, etc.)

• Web URL

• • Physical documentvirtual entry point (resource identifier)

17. Future

• What do you anticipate?

• • If you are a user

• • If you are a developer

18. Summary

• Back to the opening

• • What is the web (WWW)?

• • What is a web application?

• • • How do you classify an application as web application?

19. Key Concepts

• Internet, web, web application

• HTML, HTTP, URL

• Web server, browser

• Domain, IP, DNS

• XML, CSS, DHTML, AJAX

• Web service, API

• SSL, PKI

• Web 2.0