Introduction to the Internet and Web

What is Web Design?

Web design is the process of creating documents that will delivered to an end-user through the World Wide Web.
It can involve
- Visual design (How the web page looks)
- Interaction and Interface design (How the user will interact with the page)
- Information design (How the information is structured)

Visual designers use graphics tools such as Adobe Photoshop or Corel Draw or GIMP to plan the look of the page. The same information can be presented with very different looks.
LWD figure 1.4

The interaction designer plans generally how the user will need to navigate through the information, forw example with a storyboard.
LWD figure 1.3

The visual and interaction designers also plan generally how to present the information for the user to access it, for example by creating a wireframe diagram
LWD figure 1.1

The information designer plans the overall site structure, for example by creating a site diagram
LWD figure 1.2

What is Web Development?

Web development is the creation and troubleshooting of the documents, style sheets, scripts, programs and media that make up a site.
It can involve
- HTML and CSS coding (Basic document production)
- Scripting and programming (Adding dynamic functionality; providing behind-the-scenes support.)
- Creating and deploying multimedia (Images, audio, video) production

Front end versus back end

Front end design and development - relates to what the user sees in the browser
- Graphics design
- Information design (user experience)
- Interface design
- Document production
Back end design and development - relates to how information is managed on the server and delivered to the client
- Forms processing
- Information design(organization)
- Content management
- Database programming
- Server-side web applications

The Internet

is the collection of INTERconnected computer NETworks around the world.
is the resources and information available through those networks
began in 1969 with the United States ARPAnet connecting four university centers: UCLA, Stanford University, University of California, Santa Barbara, and the University of Utah.
By the end of 1971 there were 19 computers on the ARPANET, and by the end of 1973, 59, including one in Hawaii and one in London.
extended to academic and government institutions with the National Science Foundation funded NSFNet in 1986, and opened up to commercial use in 1991.
defined and documented through technical documents called "Request For Comments" documents or RFCs. (http://www.faqs.org/rfcs/rfc3.html)

The World Wide Web

is one method of distributing and interacting with information over the Internet
was designed in 1989 by Tim Berners-Lee at the European Laboratory for Particle Physics (CERN).
was originally designed to let scientific researchers share results
allows documents to contain hyperlinks to other documents anywhere on the Web
Is defined by three sets of standards
- URL - Uniform Resource Locator
- HTTP - The HyperText Transfer Protocol
- HTML - The HyperText Markup Language

TCP/IP

stands for Transmission Control Protocol/Internet Protocol
is actually a collection of protocols, or rules, that govern the way data travel from one machine to another across networks.
A protocol describes:
- the format that a message must take
- the way in which computers must exchange a message
uses packet switching to transfer the information in messages
The Internet is based on TCP/IP

Some Protocols

FTP (file transfer protocol) - An FTP client program contacts an FTP server and requests the transfer of a file; the FTP server responds by transferring the file to or from the client
HTTP (HyperText Transfer Protocol) - The client program is a World Wide Web browser. The browser requests the contents of a web page and the web server assembles the results to display on the user's computer
SMTP (Simple Mail transfer Protocol) Used for sending and receiving emails
POP3 (Post Office Protocol 3) Used for downloading email messages
Telnet (Remote Login)

IP Addresses

Every computer connected to the Internet is identified by a unique number called its IP (Internet Protocol) address
The numeric IP addresses are commonly (but not necessarily) represented as four decimal numbers separated by dots
IP addresses can also be assigned human-readable names in the system known as the Domain Name System
wyrd.hood.edu, the server used for this course, corresponds to 144.175.9.72

A URL tells

Is a uniform naming scheme for locating resources on the Web
HOW to transfer and interpret a document (the scheme)
The Host computer on which the document is located
The location of the document on the host

Another simpler example:

Client/Server Model of Communication

Describes the way that components of a system can interact with each other
Each component is acting as either
- A Client, which requests services from other components, or
- A Server, which provides services in response to requests

How the web works: HTTP client/server transactions

The Client
- Requests services or information from another computer (the server computer)
- Formats the request so that the server can understand it
The Server
- Receives a request from a client and processes the request
- Responds by sending the requested information back to the client
The Client
- Processes the response from the server in an appropriate way, such as rendering it for display

A Web page may require several requests from the client to one or more servers to collect all the parts of the page (text and graphics) which are then assembled into the displayed page by the browser

Standards

SGML
- stands for "Standard General Markup Language"
- is defined in international standard ISO 8879:1986.
- a standard for specifying a markup language
- was used by Tim Berners-Lee for HTML creation
HTML
- was based on SGML, began as a very simple language in the early nineties.
- describes "structure, not presentation".
- HTML progessed through a series of revisions, becoming more and more complex and powerful. The last standard was HTML 4.01 in 1999.
- The HTML 5 specification is being developed as a continuation of HTML and an alternative to XHTML. It is backwards compatible with both HTML 4 and XHTML 1. HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.
- Some of the most interesting new features in HTML5:
  - The <canvas> element for 2D drawing
  - The <video> and <audio>elements for media playback
  - Support for local storage
  - New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
  - New form controls, like calendar, date, time, email, url, search
XML
- XML is a language that describes, delivers, and exchanges structured information.
- XML is meta-language that specifies rules for making a tag-based markup languages.
- XML requires a language to:
  - require that documents be well-formed
    - always include end tags - for example, <p>...</p> and <h2>...</h2>
    - add a / to self-terminate empty tags - for example, <br /> and <hr />
    - always nest elements properly - for example
```
<p> <em> ... </em> </p>
```
      , not
```
<p> <em> ...  </p> </em>/pre>
```
  - use lower case for element and attribute names
  - quote all attribute values - for example, <a href="demo.html">, not <a href=demo.html>
  - always provide attribute values - for example, href="" is legal, but not href alone.
XHTML
- eXtensible HyperText Markup Language
- HTML revised to be be an XML-based language.
- designed to be usable by many different devices, including ones which do not yet exist.
- much more versatile and generallizable than HTML.
- based on the principle that some transformation will produce final form of document.
- diagram from W3C)
The relationship between XHTML, HTML, and XML

Comments to: dong@hood.edu

Last Modified: 28 May 2015. 14:32

IT581: Practicum in Web Development, Summer 2015 (Hybrid)