Introduction to Web Development

1
Introduction to Web Development
2
W3C

• The World Wide Web Consortium (W3C) An
  organization that serves as a source of public
  information about the Web, Web development
  technologies and Web standards.

3
W3C

• W3C provides the current specification for HTML
  along with proposals for future additions to
  HTML.
• http//www.w3.org.

4
Internet History (The "Cliff Notes" Version)

• ARPANET (Advanced Research Project Agency
  NETwork)
• In the late 1960s, the US Department of Defense
  began an experiment in the design of robust
  computer networks.
• Goal to construct a network of computers that
  could withstand the loss of several machines
  without compromising the ability of the remaining
  ones to communicate.

5
Internet History (The "Cliff Notes" Version)

• The technologies that enabled decentralized
  networking were later refined to become the key
  protocols of Internet technology, Transmission
  Control Protocol / Internet Protocol (TCP/IP)

6
Internet History (The "Cliff Notes" Version)

• For the most part, only defense contractors and
  academic institutions used ARPANET.

7
Internet History (The "Cliff Notes" Version)

• NSFNET (National Science Foundation Network)
• Established by the NSF in 1986.
• Open to a much broader range of academic
  institutions and research facilities.
• Marked a key shift in the direction of the
  Internet away from defense, government, and
  academia toward a more inclusive network that
  became the backbone of the Internet.

8
Internet History (The "Cliff Notes" Version)

• 1980s and 1990s
• In the 1980s, private companies began developing
  local and wide area networks (LANs and WANs).
• ARPANET was decommissioned in 1989.

9
Internet History (The "Cliff Notes" Version)

• Although the physical infrastructure for
  exchanging information was being built during the
  1980s, the higher level of organization needed to
  link related pieces of information across the
  vast network lagged behind.
• Instead, there was a patchwork of incompatible
  data exchange protocols inherited from various
  lines of parallel internetworking development.

10
Internet History (The "Cliff Notes" Version)

• Adding to the confusion was the proliferation of
  document types and formats, graphics types,
  database formats, etc.
• Each required the user to both own and master a
  different piece of software, with no two having
  quite the same interface.

11
Internet History (The "Cliff Notes" Version)

• Even if you could find the data you wanted on the
  Internet (search engines had not yet been
  invented), there was no guarantee that you could
  read it unless you could determine its file type
  and match it to (and own) the appropriate
  software.

12
The World Wide Web (WWW)

• The WWW was developed out of CERN, the European
  Particle Physics Laboratory in Geneva,
  Switzerland.
• In 1989, Tim Berners-Lee (a physicist) of CERN
  developed a simple, tag-based language called
  HTML.

13
The World Wide Web (WWW)

• Berners-Lee wanted to exchange physics papers
  with other physicists.
• HUGE innovation when a special area of text
  (called a hyperlink, or just link) was clicked, a
  request was automatically initiated for the
  related document that would immediately (well, in
  theory) be retrieved.

14
The World Wide Web (WWW)

• The WWW is the Internet's user interface, the
  result of the interaction between the Internet's
  wild growth and users' frustrations with its
  limitations.
• Intended to reduce the Tower of Babel confusion
  of the various protocols of the internet, as well
  as allowing graphics.

15
The World Wide Web (WWW)

• Mosaic, the first web browser, was developed at
  the National Center for Supercomputing
  Applications (NCSA) at the University of
  Illinois, Urbana-Champaign.
• Designed primarily for viewing HTML documents,
  plus built-in tools to access other resources,
  such as FTP (more later).

16
The Nuts and Bolts of Internet Communications

• TCP/IP (Transmission Control Protocol / Internet
  Protocol), the key protocols of the Internet
• The message is broken down into data packets at
  the source.
• Each packet independently travels to its
  destination by whatever network route is most
  efficient.
• Packets are reassembled when they reach their
  destination.

17
The Nuts and Bolts of Internet Communications

• TCP/IP (used in conjunction with other protocols)
  was successful because it delivered a few basic
  services that everyone needs (file transfer,
  electronic mail, remote logon) across a very
  large number of client and server systems.

18
The Nuts and Bolts of Internet Communications

• As with all other communications protocols,
  TCP/IP is composed of layers

19
The Nuts and Bolts of Internet Communications

• Transmission Control Protocol is responsible for
  verifying the correct delivery of data from
  client to server and vice versa.
• Data can be lost in the intermediate network, so
  TCP adds support to detect errors or lost data
  and to trigger retransmission until the data is
  correctly and completely received.
• Check digits?

20
The Nuts and Bolts of Internet Communications

• Internet Protocol is responsible for moving
  packets of data from one networked node (any
  networked device, such as a PC, server, printer,
  etc.) to another.

21
The Nuts and Bolts of Internet Communications

• Every networked device has its own unique,
  four-byte IP address (destination address), which
  IP uses to route data packets.
• So, IP defines the format of IP addresses, which
  might look like 147.132.42.18

22
DNS, Domains, and Hosts

• IP addresses like 147.132.42.18 aren't very
  convenient for humans to use difficult to
  remember.
• Also, what if we need to move the web server to a
  different machine, with a different IP address?
• We would have to try to contact everyone who
  might want to access our server to give them our
  new IP address!

23
DNS, Domains, and Hosts

• Thus, creation of the DNS (Domain Name System)
  easy-to-remember domain names which can remain
  the same even if the IP address changes.
• www.amazon.com
• www.yahoo.com
• www.niu.edu
• Essentially aliases.

24
DNS, Domains, and Hosts

• DNS proviodes for Uniform Resource Identifiers
  (URIs), more commonly known as Uniform Resource
  Locators (URLs) short strings that identify
  resources on the web such as web pages,
  documents, images, downloadable files, services,
  electronic mailboxes, and other resources.

25
DNS, Domains, and Hosts

• A host refers to a fully qualified domain name.
• Example
• www.mydomain.com

26
DNS, Domains, and Hosts

• Example
• http//www.domainname.com/library/filename.htmll
  ocation

27
DNS, Domains, and Hosts

• Top-level domain types the characters at the end
  of the host, after the period.
• Those based on type of activity.
• Those based on geographical location.

28
DNS, Domains, and Hosts

• Activity-based domain types
• .com - Originally for companies and commercial
  activities, now for any purpose.
• .org Originally for nonprofit organizations and
  individuals, now for any purpose.
• .net Originally for network organizations (such
  as Internet providers), now for any purpose.

29
DNS, Domains, and Hosts

• .gov Governmental organizations in the United
  States (monitored).
• .mil Military organizations in the United
  States (monitored).
• .edu Post-secondary degree-granting colleges
  and universities (monitored, although some
  non-qualifying institutions retain an .edu domain
  issued prior to stricter regulations).

30
DNS, Domains, and Hosts

• Examples of geographically-based domain types
• .us
• .uk
• .jp
• .in

31
DNS, Domains, and Hosts

• File Name If omitted, most servers automatically
  go looking for index.htm or index.html.
• Other default names can also be set up by the
  server administrator.
• Search engine spiders (indexing the web) also go
  looking for index.htm and index.html to your
  advantage to use these files names.

32
DNS, Domains, and Hosts

• The DNS system is located on most networks
  throughout the world.
• Each device on the web is configured to check
  with a local DNS server (and backup server) for
  translating URLS to IP addresses.

33
DNS, Domains, and Hosts

• If the host is unknown to that local DNS server,
  the DNS server requests the information from
  InterNIC (http//www.internic.net), the US
  Department of Commerce DNS server, which
  maintains the complete list of domain names.
• Once the correct IP address is returned, the
  local DNS server updates its own records for
  future use.

34
Purchasing a Domain Name

• See www.register.com, www.hover.com,
  www.godaddy.com to purchase domain names. (Plenty
  of other places, too.)
• When you buy a domain name, you set it up so that
  the simple domain name forwards to the more
  complex name you need for your server.

35
DNS, Domains, and Hosts

• Example
• entering www.pennymcintire.com
• forwards to http//www.cs.niu.edu/mcintire/
• Most include at least one email forwarding
  account.
• Can easily change domain and email forwarding
  almost instantaneous response.

36
Clients, Servers, and Browsers

• The Internet connects clients and servers.
• Clients first

37
Clients, Servers, and Browsers

• A client refers to both the users browser and
  the computer upon which that browser runs.
• Also called the view layer or the presentation
  layer.
• Browsers Internet Explorer, Firefox, Opera,
  Safari, etc.
• The browsers purpose is to retrieve and display
  documents for we humans.

38
Clients, Servers, and Browsers

• The browser uses
• HTML files, which are static files using the HTML
  markup language.
• HTML is good at indicating structure (the
  relationship between items), but not quite so
  good at indicating formatting (what the items
  look like).
• More on this later.

39
Clients, Servers, and Browsers

• Cascading Style Sheets (CSS), the newer and
  preferred method for indicating formatting such
  as colors and fonts.
• Immensely more powerful than HTML formatting.
• Can be externalized into a single file that can
  be referenced by multiple pages, a big advantage
  when managing lots of pages that should all look
  alike.
• Can be manipulated by scripting languages.

40
Clients, Servers, and Browsers

• The Document Object Model (DOM), the object
  interface to dynamically update the content,
  structure, and style of HTML documents.
• When a page loads into a browser, the browser
  creates a hidden, hierarchical map of all of the
  scriptable objects in the page.
• Scripting languages trace this map to get to each
  object.

41
Clients, Servers, and Browsers

• Scripting languages, like JavaScript (which is
  not Java!) and VBScript, to do active (rather
  than static) and often interactive tasks such as
  
• Data validation.
• Displaying things or changing formatting on the
  fly, such as mouseovers.
• Moving elements around the screen, such as the
  falling snowflakes you see on some web sites.

42
Clients, Servers, and Browsers

• Dynamic HTML, which is the integration of HTML,
  The DOM, CSS, and scripting languages.
• Web sites on steroids.
• Metaphor of a sentence
• HTML is the noun what is displayed.
• CSS is the adjective how it looks.
• JavaScript is the verb it does something.

43
Clients, Servers, and Browsers

• Also used
• Java applets (small Java programs).
• Plug-ins like Flash, music players, etc.
• The browser cannot directly access data in a
  database using just these client-side tools.
• To access databases, you need server-side
  technologies, especially Web (or HTTP) servers

44
Clients, Servers, and Browsers

• A server is
• A software package that provides services to a
  user.
• The computer box upon which the server software
  and relevant files reside.
• There could be several software servers (a web
  server, a data server, etc.) running on a single
  physical server (computer).

45
Clients, Servers, and Browsers

• A web server (HTTP server) delivers the requested
  page to the browser.
• It runs programs servlets, Java Server Pages
  (JSPs), ASP, PHP, ColdFusion, CGI/Perl,
  server-side scripting languages, etc.
• These are used to do things like displaying data
  from a database, data validation against a
  database, updating a database, etc.

46
Clients, Servers, and Browsers

• Note this class will not teach server-side
  technology at all, only client-side technologies
  that is, technologies that run in the users
  browser.

47
HTTP

• HTTP (Hypertext Transfer Protocol) is defined as
  a stateless, connectionless protocol.
• HTTP is stateless and connectionless because
  neither the client nor the server maintains
  information about what is happening during the
  connection.

48
HTTP

• When a client makes an HTTP request of a server,
  a connection is initiated and maintained only as
  long as is required for the server to meet the
  individual request.
• If another request is made from the same client
  to the same server, a new connection is
  established.

49
HTTP

• This contrasts with protocols such as FTP that
  maintain the connection as long as a client is
  logged on or until timeout.
• So, with HTTP, a connection is made, the
  information is provided, and the connection is
  immediately broken, making way for new requests
  from other clients.

50
FTP

• File Transfer Protocol (FTP) a means of
  transferring files between an FTP server and a
  client.
• The objectives of FTP are
• To transfer data between devices, reliably and
  efficiently.
• To shield a user from variations in file storage
  systems among hosts.

51
FTP

• FTP, though usable directly by a user at the
  command line or from the URL line of a browser,
  is easier to use from within an FTP program like
  WSFTP or Filezilla.
• You will use one of these programs to FTP your
  files out to oldMP.
• See the handout on my webpage, FTP Instructions
  please read carefully.

52
Email

• Electronic mail, using SMTP (Simple Mail Transfer
  Protocol) and POP 3 (Post Office Protocol version
  3).
• The most widely used service on the Internet.
• Email can be delivered, stored, and retrieved
  without a simultaneous connection between sender
  and receiver.

53
Email

• Mail clients also support the transfer of
  attached files using MIME (Multipurpose Internet
  Mail Extensions).
• Tells the the mail client software and the
  browser which programs to use to open the various
  file types (.doc, .html, etc.)
• View and set MIME types in Windows XP
• Windows Explorer gt Tools gt Folder Options gt File
  Types

54
Intranets and Extranets

• An intranet is the implementation of Internet
  communication technologies on an internal network
  a "private Internet."

55
Intranets and Extranets

• An extranet is a private network (intranet) that
  has been expanded to allow vendors or customers
  to have expanded access to the private network.
• It merges an intranet with the Internet to create
  a middle-ground of expanded, but not complete,
  access to an intranet.

56
Internet Security

• Many intranets incorporate an external Internet
  connection, using a firewall security software
  that allows limited access to your site from the
  Internet, allowing approved traffic in and out
  according to a well-defined plan.

57
Internet Security

• SSL (Secure Socket Layer) Protocol a protocol
  implemented on a web server for secure
  communications.
• The primary goal is to provide privacy and
  reliability between two communicating
  applications.
• Indicated in the browser by a locked padlock icon
  or a colored URL bar.

58
Internet Security

• SSL, layered on top of TCP, allows the server and
  client to authenticate each other and to
  negotiate an encryption algorithm and
  cryptographic keys before the browser transmits
  or receives its first byte of data.

59
Internet Security

• The SSL protocol provides connection security
  that has three basic properties
• The connection is private.
• Encryption is used after an initial handshake
  that defines a secret key.
• The peer's identity can be authenticated using
  public key cryptography.
• The connection is reliable.
• Message transport includes a message integrity
  check.

60
How Web Technology is Used

• The type of web sites you are most accustomed to
  seeing sites that are selling something or that
  are providing free information.
• Thats just the tip of the iceberg

61
How Web Technology is Used

• Used as a front-end for standard business
  applications.
• In this case, the application is using a BUI
  (Browser User Interface) instead of a standard
  GUI (Graphic User Interface).

62
How Web Technology is Used

• Why a BUI instead of a GUI?
• IT systems must be as agile as the business
  itself easier to modify an HTML page than a
  standard GUI.
• They must also be portable the HTML page can (in
  theory) display on any computer that has a
  browser.
• Updating is easier update the single version on
  the server, rather than updating myriad
  individual PCs.

63
Tools You Need for This Class

• You are not at all required to purchase ANY
  software yourself, unless you choose to do so.
• You are not required to use any specific software
  packages, nor will I ever test you on any
  specific packages. You can use whatever HTML and
  graphics editing packages you choose to use.
• You are always welcome to create your HTML
  totally from scratch in any ASCII text editor,
  like Notepad or Editpad.

64
Tools You Need for this Class

• Free tools
• Seamonkey, a free HTML editor. http//www.seamonke
  y-project.org/
• Gimp, a free graphics editing package.
  http//www.gimp.org/
• Anyone know a good, free Flash editor?

65
If You Decide to Purchase Tools

• Adobe products
• Older (but still functional) versions of
  Dreamweaver (HTML editor), Fireworks (graphics
  editor), and Flash (animation editor) in the PM
  and Faraday computer labs? (Still under
  discussion at the time these slides were posted.)
  Note Flash files created in newer versions of
  Flash (perhaps on your home computer) will not be
  recognized by the older Flash software in the
  labs.
• Photoshop, if you have access to it, can be used
  in place of Fireworks for editing graphics, but
  much harder to master.

66
If You Decide to Purchase Tools

• Download free, 30-day trial versions from
  www.adobe.com, although 30 days won't get you
  through the semester, obviously.
• 30 days for Flash will at least get you through
  the Flash assignment.
• Student pricing available through the basement
  service desk of the NIU Bookstore and through
  www.journeyed.com.
• Prices range from 199 for standalone Dreamweaver
  CS4 to 549 normally 1699 for Web Premium
  CS4 (including Dreamweaver, Flash, Photoshop,
  Illustrator, Fireworks, and Contribute).

67
If You Decide to Purchase Tools

• Microsofts Expression Web 3, embedded in
  Sharepoint Designer? (a superset of Microsoft's
  Expression Web HTML editor, which is apparently
  being phased out)
• Can obtain cheaply through our affiliation with
  Microsoft's Academic Alliance software. See
  www.cs.niu.edu, near the top right, for
  instructions.

68
If You Decide to Purchase Tools

• Can get a free (at least for the moment) download
  of Sharepoint Designer directly from Microsoft at
  http//office.microsoft.com/en-us/sharepointdesign
  er/FX100487631033.aspx.

69
If You Decide to Purchase Tools

• Heres the problem Sharepoint Designer is
  actually a server designed to facilitate project
  communication and to build full web applications.
  It appears to be complex software that is
  difficult to install and difficult to master. We
  dont know if Expression Web can be de-coupled
  from the rest of the package.

70
If You Decide to Purchase Tools

• Expression Studio 3 (standalone version, to be
  released shortly) includes Expression Web,
  Expression Blend (includes Silverlight?), and
  Expression Design.
• See http//www.microsoft.com/expression/try-it/Pa
  geTop
• Expression Web 2 alone is 59 through
  www.journeyed.com, while Studio 2 is 109
  (normally 599).