CSCI/CINF 4230 Web Application Developement

1
Welcome

• CSCI/CINF 4230 Web Application Developement
• Section 02 Tue., 700950 p.m.
• Instructor Charles Moen
• Email crmoen_at_juno.com
• Web page http//sce.uhcl.edu/moenc
• Office Delta Building 232
• Office hours
• Tue., 500700 p.m.
• If the hall door is locked, phone me at (281)
  283-3848
• Home 281-796-2820

2
CSCI/CINF 4230

• Client-side Web development
• HTML, XHTML, Cascading Style Sheets (CSS),
  JavaScript
• Server-side Web development
• ASP.NET, C
• Server-side database access
• ASP.NET, C
• Other basic topics in Web development
• HTTP protocol, parameter passing, session
  tracking, cookies
• Web 2.0

3
Todays Objectives
26-Aug-2008

• Class roster
• Course overview
• Required textbooks
• Web site
• Syllabus and schedule
• Hosting your web sites for this course at UHCL
• How to succeed
• Basic concepts
• Web 2.0

4
Required Textbooks
Course Overview

• David Schultz and Craig Cook, Beginning HTML
  with CSS and XHTML Modern Guide and Reference.
• Apress, 2007. ISBN 978-1-59059-747-7
• Matthew MacDonald, Beginning ASP.NET 3.5 in C
  2008 From Novice to Professional, Second
  Edition. Apress, 2007. ISBN 978-1-59059-891-7

5
Recommended Reference Books
Course Overview

• Stephen Spainhour and Robert Eckstein (ed.),
  Webmaster in a Nutshell, 3rd Edition.
• OReilly, 2002. ISBN 978-0-59600-357-9
• Other books are listed in the FAQs page for
  this class
• Safari Books Online by O'Reilly
• http//safari.oreilly.com/
• You can access Safari from any PC inside UHCL
  campus network.
• Provides the full text of hundreds of books

6
Course Web Pages
Course Overview

• Course page
• http//sce.uhcl.edu/moenc/csci4230fall08/index.htm
  l
• Schedule
• http//sce.uhcl.edu/moenc/csci4230fall08/schedule.
  html
• Syllabus
• http//sce.uhcl.edu/moenc/csci4230fall08/syllabus.
  html
• FAQs
• http//sce.uhcl.edu/moenc/csci4230fall08/resources
  .html

7
Hosting Your Web Site
Course Overview

• The dcm server is used to host Web sites for UHCL
  courses
• You will get an account on this server, and your
  homework must be done on it
• dcm.uhcl.edu
• Operating system Windows Server 2003
• Web server IIS6
• http//dcm.uhcl.edu/yourUserName
• Files for your Web pages go in the pages folder
• The db folder has an Access database file,
  db.mdb
• Krishani Ekanayake is the administrator
• abeysekera_at_uhcl.edu

8
How to Succeed
Course Overview

• Expect to spend 1015 hours per week on this
  class
• Use a text editor to write the code, and write a
  lot of code
• Read other peoples programs
• After grading is finished, post your homework on
  your home page
• Homework assignments
• Start them early, and hand them in on time
• Check the requirements and make sure nothing is
  missing
• Team project
• Select your team mates
• Attend the classes participate
• Read the book and the resources

9
Basic Concepts

10
The Internet
Basic Concepts (Dougherty, Howe, Tyson)?

• A global network of interconnected networks?
• Based on technology developed in the 1960s
• ARPAnet, the first version, was funded by the
  U.S. Department of Defense in a quest to
  implement a computer network that could survive a
  nuclear bomb attack if part of the network was
  destroyed, then routers would direct packets
  through the surviving paths(ARPAnet Advanced
  Research Projects Agency Network)?
• Goal a robust network of many computers for
  sharing scientific and military data
• Initially, ARPAnet connected only four computers
  at UCLA, Stanford Research Institute, UCSB, and
  the University of Utah.
• Mid 1970s, many government agencies and
  universities were connectedEarly 1990s, private
  and commercial networks were added
• No one owns the Internet
• The Internet Society, a 1992 non-profit group,
  oversees its policies and protocols

11
Growth of the Internet
Basic Concepts (http//www.internetworldstats.com)
?
12
The Internet (Continued)
Basic Concepts (Dougherty, Howe, Tyson)?

• General-purpose network
• TCP/IP - protocols for sending packets of data on
  the network
• Many services run on the Internet
• email
• FTP
• telnet
• World Wide Web (just one service that uses the
  Internet)
• Every computer that connects to the Internet is
  already part of a smaller network
• When you connect to the Internet at home, you
  become part of your Internet Service Providers
  (ISP) network
• At work or at school, your computer connects to
  the Internet through the Local Area Network
  (LAN)?
• Thus, the Internet is a network of networks

13
Internet Infrastructure
Basic Concepts (Tyson Wikipedia)?
Point of Presenceis the physical connection to
the Internet used by the ISP(servers, routers,
switches)?
Network Access PointFour physical facilities for
data exchange between service providers. Now
replaced by Internet Exchange Points
(IXP)(network switches)?
Internet Service Provider is a company that
provides access to the Internet
14
World Wide Web
Basic Concepts (Berners-Lee, Dougherty, Howe,
Tyson, Wikipedia)?

• A system of interlinked hypertext documents
  accessed via the Internet - Wikipedia
• Created by Tim Berners-Lee
• In 1989, proposed it as a way to share documents
  over a network while he was working at CERN
  (European Laboratory for Particle Physics)?
• Originally conceived as just a collection of
  shared documents
• Based on hypertext links within the text that
  link to other text
• By 1990, built the first Web server, named
  httpd, and the first Web browser, named
  WorldWideWeb
• His work was released to the public in 1993
• World Wide Web Consortium (W3C)?
• Standards organization for the Web
• Founded by Tim Berners-Lee

Sir Tim Berners-Lee from www.w3c.org/People/Berner
s-Lee
15
How does the Web work?
Basic Concepts (Guelich)?

• The Web uses a client-server architecture

Web server software, such as Apache or IIS is the
server
1. The browser sends an HTTP request over the
Internet to the server
A Web browser, such as FireFox is the client
3. The server sends an HTTP response to the
browser containing the HTML text
2. The server examines the request to determine
what document to return, index.html in this
example
4. The browser interprets the HTML and displays
it as a Web page
GET /index.html HTTP/1.1
16
Client-server Architecture
Basic Concepts (Guelich)?

• Web application development technologies

Web server software, such as Apache or IIS is the
server
A Web browser, such as FireFox is the client
HTTP
Client-side HTML XHTML CSS JavaScript
Server-side ASP.NET C
17
Web Server
Basic Concepts (Doughterty, Netcraft)?

• Server software
• Installed on a computer connected to the Internet
• Often the computer that runs the server software
  is referred to as a Web server
• Manages a collection of HTML documents, as well
  as documents in other languages, such as C
• Manages and serves the clients requests for
  the documents
• Two Web server programs dominate the market share
  today
• Apache
• Microsoft

18
Web Server
Basic Concepts (Netcraft)?

• Netcraft, June 2008 Web Server Survey. (2008).
  Online. Available http//news.netcraft.com/arch
  ives/web_server_survey.html

19
User Agents
Basic Concepts (Schultz)

• Software that interprets HTML
• Many different devices can access the Web
• Computers, PDAs, cell phones, game consoles,
  appliances
• Web browser
• The most familiar user agent
• Graphical Web browser pages rendered with
  styled text, colors, and images
• The most-popular browsers
• Microsoft Internet Explorer
• Firefox
• Safari

20
URL
Basic Concepts (Ding, Spainhour, Schultz)?

• Uniform Resource Locator
• The address of a document on the Web

http//sce.uhcl.edu/moenc/index.html
Protocol
Host nameor IP address following by an optional
port number, e.g. sce.uhcl.edu80
Path to the document
Rules for moving data over the Internet
The root directory in this path is defined by the
server, and may not be the same as on the hosts
file system
Extension
Indicates the type of file. If there is no
document name in the URL, the server is usually
configured to use index.html or default.html
The human-readable domain name is translated to a
machine usable IP address by the Internets
Domain Naming Service servers
21
URL for local development
Basic Concepts (Ding, Spainhour)?

• The loopback address

http//127.0.0.1
http//localhost
22
Web Design Evolution
Basic Concepts (Siegal, Ding)?

• First Generation
• Plain, mostly text
• Single column
• Presentation (appearance) set by browser
  defaults
• Gray background with black text
• Links were underlined and in color
• Emphasis on structure, not design
• Few images
• Horizontal rules
• Bullet lists
• Often created by programmers, not designers
• Slow modem connections were common

From Wikipedia
23
Web Design Evolution
Basic Concepts (Siegal, Ding)?

• Second Generation
• Netscape extensions to HTML introduced
• lttablegt
• JavaScript
• The ltblinkgt tag
• Designers usually controlled the presentation
• Some common features
• White backgrounds
• Banners across the top of the page
• Icons and graphic text for headings
• Graphic buttons with beveled edges
• Tiled images in the background
• Animated gif graphics

From the Internet Archive WaybackMachine www.jpmor
gan.com, June 30, 1998
24
Web Design Evolution
Basic Concepts (Siegal, Ding)?

• Second Generation (cont.)?
• Structure
• Main, graphic-intensive home page
• Menus and button bars for navigation
• Tables, introduced by Netscape, were often used
  to organize the page into columns
• Many sites were well-designed
• The best ones showed that the designers were
  concerned about legibility and communicating
  clearly to the visitor
• Many sites were garish and ugly
• The worst second generation sites used technical
  tricks, such as animated gif icons just because
  they were cool

From the Internet Archive WaybackMachine www.uiuc.
edu, March 03, 1997
25
Web Design Evolution
Basic Concepts (Siegal, Ding)?

• Third Generation
• E-commerce
• Database-driven
• Clever visual design based on a theme
• Tables used extensively
• CSS used for presentation
• Designed to involve userswith the site
• Often started with a splash screen

From the Internet Archive WaybackMachine www.klutz
.com, Feb 02, 2001
26
Web Design Evolution
Basic Concepts (Siegal, Ding)?

• Fourth Generation
• Sophisticated visual design
• Presentation is designed with div elements,
  defined with CSS, not tables
• Most sites use server-side software
• Multi-tiered on the server side
• Database driven
• Possibly with web services
• New technologies
• AJAX and client-side software
• Flash, Silverlight, Adobe AIR
• Big focus is web usability and accessibility

http//www.ncsa.uiuc.edu http//www.jpmorgan.com
http//www.uiuc.edu http//www.klutz.com
27
Accessibility and Usability
Basic Concepts (Koch, Ding)?

• Accessibility
• Your Web site should be accessible to anyone
  under all circumstances
• Issues
• Users with diminished eyesight must use screen
  readers
• Some users dont use a mouse they may be
  partially disabled
• Some users disable JavaScript
• Usability
• Enhancing your page with features that make it
  easier to use
• Examples
• Show a form field only when it is needed by the
  user
• Make important topics easy to find
• Keep the user interface simple

28
Web 2.0

29
What is Web 2.0?
Web 2.0 (OReilly, Ding, Yue)?

• A phrase by Tim OReilly
• Published online, What Is Web 2.0, Design
  Patterns and Business Models for the Next
  Generation of Software
• September 2005
• Web 2.0 Conference
• Now in its fifth year, called Web 2.0 Summit
• Web 2.0 and the conference were created by
  brainstorming about what is important to the Web
  after the collapse of the dot-com bubble

30
What is Web 2.0?
Web 2.0 (OReilly, Ding, Yue)?

• A buzzword difficult to understand because
  theres no consensus on its meaning
• Generally refers to a new phase of Web business
  models and technologies
• An attempt to identify characteristics of Web
  businesses that survived the dot-com crash
• It is not a new standard for the World Wide Web

31
Web 1.0 vs. Web 2.0
Web 2.0 (OReilly, Ding, Yue)?

• Web 2.0

• Web 1.0

• Britannica Online
• Publishing
• Personal websites
• Screen scraping
• Directories
• Netscape

• Wikipedia
• Participation
• Blogging
• Web services
• Folksonomies
• Google

32
Some Web 2.0 Characteristics
Web 2.0 (OReilly, Ding, Yue)?

• Web-centric
• Data intensive
• Open architecture for participation
• Social networking
• Lightweight software development
• Perpetual beta
• Business model takes advantage of the long tail

33
Software DevelopmentWeb 2.0 Style
Web 2.0 (OReilly, Ding, Yue)?

• Google Web 2.0

• Microsoft old school

• Traditional sales and licensing
• Heavy weight desktop software
• Long update cycle
• Tens of versions
• Millions of copies
• Backward compatible
• Value is in the software

• Services through the Web, no sales, no licensing
• Universal thin client (browser)
• In perpetual beta will be improved
  incrementally over the course of time
• One version
• One copy hidden massive server farms
• Open standards and public API
• Value is the data

34
The Long Tailand Web 2.0
Web 2.0 (Anderson, Wikipedia)?

• Chris Anderson (2005)?
• http//www.wired.com/wired/archive/12.10/tail_pr.h
  tml
• The future of business is selling less of more
• Make everything available
• Keep prices as low as possible
• Help the buyers find what they want
• Amazon.com vs. Barnes and Noble
• Netflix vs. Blockbuster
• Strategy differences
• Blockbuster strategy is to sell a large number
  of very popular items
• Long Tail - Sell small quantities of obscure
  items to a large number of people

The Long Tail
Popularity
Most popular
Least popular
Products are ranked by popularity on the
horizontal axis
35
Food for Thoughtabout The Long Tail
Web 2.0 (Elberse)?

• Anita Elberse, Should You Invest in the Long
  Tail?. Harvard Business Review, 2008.
• http//harvardbusinessonline.hbsp.harvard.edu/hbsp
  /hbr/articles/article.jsp?ml_actionget-articlear
  ticleIDR0807Hml_issueidBR0807ml_subscribertru
  epageNumber1_requestid57934
• Anita Elberse investigated actual sales patterns
  in the music and home video industries to test
  whether the Long Tail theory has a good potential
  for profit
• Her conclusions
• The Long Tail theory might work, but in limited
  cases
• The blockbuster strategy is still the most
  reliable

36
Some Web 2.0 Technologies
Web 2.0 (OReilly, Ding, Yue)?

• XML
• AJAX
• Web Services API
• Social networking
• Web syndication, e.g. RSS
• Folksonomies collaborative tagging
• Ruby on Rails

37
Some Web 2.0 Applications
Web 2.0 (OReilly, Ding, Yue)?

• Flickr
• http//www.flickr.com
• Select Explore to see a tag cloud, an example
  of a folksonomy where the most popular tags are
  in a larger font size
• Google Docs
• Cloud computing software is provided as an
  Internet service
• http//docs.google.com/Presentation?iddg787rt7_33
  7dpzzgbdd
• Del.icio.us
• Storing, sharing, and discovering web bookmarks
• GMail
• MySpace.com
• Bit Torrent

38
Food for Thoughtabout Web 2.0 technologies
Web 2.0 (McAllister)?

• Is the Web still the Web?
• Neil McAllister (June 3, 2008)?
• http//weblog.infoworld.com/fatalexception/archive
  s/2008/07/is_the_web_stil.html
• Given the growing number of data types and file
  formats being transmitted over HTTP and the
  increasing complexity of the applications that
  make use of them, is todays Web really still the
  Web? Or is it morphing into something else?
• Tim Berners-Lee the Web as information storage
  based on hypertext
• Web documents text marked up with HTML linked
  to other documents
• Today
• Rich client interface
• Technologies like Ajax, Flash, MS Silverlight,
  Google Web Toolkit, cloud computing
• Is it inappropriate to force these technologies
  to use the Web infrastructure?

39
References

• Chris Anderson (2005)?. The Long Tail.
  Online. Available http//www.wired.com/wired/a
  rchive/12.10/tail_pr.html
• Berners-Lee, Tim. (1990). WorldWideWeb Proposal
  for a HyperText Project. Online. Available
  http//www.w3.org/Proposal
• Berners-Lee, Tim. Tim Berners-Lee (Homepage).
  Online. Available http//www.w3.org/People/Bern
  ers-Lee
• Ding, Wei, Introduction of Web Application
  Development UHCL lecture slides, 2008.
• Dougherty, Dale and Richard Koman, The Mosaic
  Handbook for Microsoft Windows. Sebastopol, CA
  OReilly and Associates, Inc.,1994.
• Howe, Walt. (2007). A Brief History of the
  Internet. Online. Available
  http//www.walthowe.com/navnet/history.html
• Koch, Peter-Paul, PPK on JavaScript. New Riders,
  2007.
• O'Reilly, Tim. (2005). What Is Web 2.0".
  Online. Available http//www.oreillynet.com/pub
  /a/oreilly/tim/news/2005/09/30/what-is-web-20.html
  .
• Tyson, Jeff. How Internet Infrastructure Works.
  Online. Available http//computer.howstuffworks
  .com/internet-infrastructure.htm
• Siegal, David, Creating Killer Web Sites (Second
  Edition). Hayden, 1997.
• Yue, Kwok-Bun, Web 2.0, Research and You.
  Presentation at UHCL, 2006.