World Wide Web

Lectures > The WWW

The World Wide Web
Dr. Linda M. Perry, Charlene Wee and Aaron Ng

What is WWW?

The Internet is a worldwide system of interconnected computer networks.
- U.S. military project, late 1960s.
WWW is a graphical, hypertext-based information system
- Part of the Internet
- Access to multitude of Internet resources.
- Access to interconnected computers.
Father is Tim Berners-Lee.
- Developed the concept, first browser and first web server, 1990, in Switzerland.

Left: Berners-Lee at the time he developed the first browser.
Right: Berners-Lee in recent photo.

Photos courtesy of W3 Consortium

WWW Attributes

1. Multiple protocol support

Instead of running separate programs to download files, read articles, or view images, only need one, a browser, such as Explorer or Safari, for most functions.

2. Hypertext-based Information Access

Once, to access information on a computer, you needed to know its physical address

A series of numbers separated by dots, such as 68.101.69.144.

Berners-Lee used hypertext concept made popular by Macintosh in its HyperCard application.

The basis for most information on a browser is a file called a hypertext markup language document, or HTML document.

Along with CSS (cascading style sheets), graphics and scripting, HTML provides the basics of building web pages and applications.

HTML provides the structure; CSS the layout.

Provides basic structure and describes contents of pages displayed by browsers and the location of hyperlinks within a page.

Hypertext

A process with special connections --hotlinks or hyperlinks-- in HTML documents.

Clicking on a link tells the browser to load a copy of the file represented by the link.

Can move from page to page without knowing the name of the file or the address of the computer.

The browser takes you to the document.

May be within a website--a collection of web pages grouped together on a computer system.

Hyperlinks

Usually represented by underlined text and/or highlighted in color. Default is blue.

Uses an addressing system called a universal resource locator (URL) to indicate the location of web pages: For example, http://www.google.com/.

Can also point to other Internet resources, including FTP (file transfer protocol) servers.

3. Distributed Information

The WWW has no central location.

Documents are stored on computers all over the world.

Unlimited information.

Infinite storage capacity.

4. Graphical Interface

Internet was text oriented. WWW added graphics.

You need a computer with a GUI (graphical user interface).

5. Multimedia Capabilities

Most browsers play sound clips, video clips, and real-time (streaming) audio and video.

May need extra applications for some features, such as Flash animation and videos.

6. Interactive Access

Click on a hyperlink to see a different website, a different page in the same Website, or a different place on the same page.

Forms allow sites to accept information and perform various actions based on responses.

Includes text fields, check boxes, buttons, menus, and popup lists that give the ability to interact.

For ordering products, providing information, blogs, surveys, feedback, polls, and input for search engines.

7. Dynamic Updating

WWW is like a global encyclopedia.

Differs in that it constantly changes and evolves.

WWW is as up-to-date as its latest entry.

Look for update notations.

Information is only as reliable as its author.

8. Cross-Platform Support

Software made for various computer systems often not compatible.

Software updates often not compatible with older versions.

WWW runs on just about any computer system and a wide variety of browsers.

Look of pages may change.

Who owns the WWW?

No one. We all do.
- Creators own their own pages.
  - But you may not own your own domain name or server on which website is located.
    - Must register domain name and (probably) lease hosting space; i.e.: godaddy.com.

Who manages the WWW?

Decentralized management, but development is overseen by the W3 Consortium.

The W3 Consortium

Supports advancement of information technology
- To develop the WWW into a comprehensive infrastructure
- To encourage a common set of WWW protocols.
- Standards based on royalty-free technology.
- Housed at MIT.
Tim Berners-Lee, founder and director.
See http://www.w3.org/.

The HTTP protocol
- The Hypertext Transfer Protocol (HTTP) is the primary way of disseminating information throughout the WWW.
- Protocols are languages that computers and networks use to communicate and send information.
  - Others include FTP, SMTP, TCP/IP
  - HTTP and CSS are the primary tools for building Web pages.
- Protocol is basic part of the URL
  
  (Back to Hyperlinks)
URL
- Protocol, domain, directory, file
  - Protocol: Type of file or service
    - Tells the browser type of file or service to communicate with, such as ftp, http or https.
  - Domain: Computer (or section of computer) where information is held
    - Such as nus.edu.sg for NUS's server; lindaperry.us for class website's server.
  - Domain name system (DNS)
    - Hierarchical naming system for computers and services on the Internet.
      - Developed in 1983 at U of Wisconsin.
  - Directory and file.
    - http://lindaperry.us/nm3217/www.htm
      - This web page in directory called nm3217 in lindaperry.us domain (section of a computer).
    - Home page is titled index.htm (important for your web site).
      - Opens automatically when only directory (or folder) name is listed in the URL
        
        defaults to page named index.htm. within directory nm3217

URL

Web Server

A special type of program on a computer connected to the Internet, managed by web hosting service.
- Web servers take requests from web browsers.
  - From a hyperlink or URL, the browser:
    - Finds the web server holding the requested information.
    - Sends request for a copy of the selected file.
- Web servers organize transmission of file copies to browsers.
  - The copies are placed in a cache in your computer.

HTML

Hypertext Markup Language.
- Gives Web pages their structure.
- Incorporates text, graphical elements and hypertext links
- Displays on a wide variety of browsers.
- Displays the information in the way its creator wanted it to appear (or close to it).
- Once HTML document is on a server, anyone can add a link to it (if they know the URL).

XHTML

XHTML (extensible hypertext markup language) helps create standards that provide richer web pages on an increasing range of platforms:
- cell phones, televisions, cars, wallet-sized wireless communicators, kiosks, and desktops.
- Compatible with XML (extensible markup language)

Home Pages

Table of contents to a collection of web pages stored on a server.
The Web browser home page
- A default home page, configured when browser installed, displayed when browser launched.
- Can alter the default home page to any web page.
  - (Web server home page, such as NUS); your personal home page; a search engine, such as Google).
  - Under Tools > Internet Options in IE.

More about Hypertext Markup Language

HTML is a simple text-based language.
- Need to be conversant in this language and how elements fit together. Can hand type all tags.

Download the Barebones Guide to HTML at http://werbach.com/barebones/

Web-page-authoring software, creates HTML files by inserting tags and managing links.
- Near-WYSISWYG editors include Adobe's Dreamweaver.
Converters
- Adobe InDesign, Microsoft Word, Excel, PowerPoint.
- Advantages:
  - Keeps track of tags, with fewer syntax errors.
  - Work in familiar program.
- Disadvantages:
  - Can't provide all HTML features
  - May not look the way you envisage, especially when design is complex
  - Creates copious amounts of code.

Cascading Stylesheets (CSS)

Language for describing the visual and aural display of pages, for a variety of devices.
- Can format text, colour, etc., globally, for entire website, rather than page-by-page.
- Has become primary resource for style and layout.
- HTML focuses on the content and structure. CSS focuses on the format.
- Describes how to change the presentation on different types of devices, such as those with large screens, small screens or printers.
- Tutorials & help on HTML & CSS:

Graphics

Downloadable.
- http://www.aaaclipart.com
- www.sxc.hu
- commons.wikimedia.org
- See Google's Images
GIF--Graphical Interchange Format
- Only 256 colours.
- Can be a storage hog.
- Best for simple images with flat colours.
- Allows transparency & animation
- Lossless format

JPEG--The Joint Photographic Experts Group.

Millions of colours.
- Yet smaller file size.
Best for photographs.
Does not support transparencies.
Lossy compression format
Progressive JPEG
- Allows image to build by layer.
  - Fastest-displaying.
- Cannot be used with image maps.

Portable Network Graphics (png)

Format for lossless, portable, well-compressed storage and exchange of raster images (bitmaps), replacing GIFs & TIFFs.
Features rich colour control (RGB).
- Supports true colour, grayscale (JPG) and 8-bit (GIF)
- Allows better colour precision & smoother fades.
Designed for Web but not print (no CMYK).
Does not support animation.
Better compression than GIF but not JPG.
- Except pictures with text or line art.

Scalable Vector Graphics (SVG)
- Allows rich graphical content including vector images, interactive animations
- Generally bandwidth-friendly
- Gaining increasing acceptance
  - SVG Tiny is supported by some web-enabled mobile phones
  - SVG will be supported by IE9

Frames

Allows browser to display multiple web pages on a single screen.
- Hyperlinks in one window can control the contents of another window:
  - Changing the contents of one window without affecting other windows.
- Hyperlinks to www won't take reader away from your site.

Server-side scripting

Script applications run on a web server
- PHP (dynamic interactivity)
  - Facebook (social networking)
  - Wordpress (blogging)
  - Jooomla (content management system)
- phpBB (web forum)
- Wikis (dynamic updating)
- ASP (dynamic updating)
Allows dynamic content
Often implemented with a standard protocol: Common Gateway Interface (CGI)
- For example, a CGI implements a wiki.
PHP – Hypertext Preprocessor
- First released as Personal Home Page tools
- For producing dynamic web pages from data collected on web page
  - Just released version 5.3.3
- Can be embedded into HTML and interpreted by the server to generate web page.
- Managed by PHP Group: http://www.php.net/
Wiki
- A page or collection of pages designed to enable anyone who accesses it to contribute or modify content, using a simplified mark-up language. From Wikipedia
CMS — Content Management System
- Software to manage content primarily for interactive use by several contributors
  - Wikipedia
ASP -- Active Server Pages
- Can dynamically edit HTML pages and customize pages for individual users
- Its code can't be viewed from the server, providing security
- Developed by Microsoft
  - Version 3.0
  - Superseded by ASP.Net (.aspx)

Mobile Web Initiative

Mobile Web Best Practices
- http://www.w3.org/TR/mobile-bp/
- Sites need to be designed for mobility
  - Users seek specific information/content rather than browse.
- CSS Mobile, SVG Tiny, XHTML for Mobile, JPG; GIF
  - Assume screen width of 120 pixels
  - 10 kb page size recommended for fast delivery.
  - 20 kb maximum allowed for most devices.
  - Use clear, concise, simple language,
  - Most important information first.
- Balance between clicking & scrolling
  - Should scroll in ONE direction.
SKOS
- Simple Knowledge Organization System
  - Announced Aug. 18, 2009 by W3 Foundation
  - A new standard for knowledge organization systems, including thesauri, classifications, subject headings.
  - For libraries, newspapers, government sites, social networking applications and other communities that manage large collections of books, reports, entries, etc.
Accessibility
- Web Content Accessibility Guidelines (WCAG) 2.0
  - Recommendation made December 2008 for people with disabilities
    - Provide text alternatives to non-text content
      - Transcripts for podcasts
    - Use sufficient contrast
    - Easy use and navigation
    - Text should be readable, understandable, error-free
    - Compatible with current and future technologies
Client-side scripting
- Executed by browsers to customize content based on user's input
- Java
  - Programming language
  - Creates custom programs called applets to allow interactive animated web pages.
    - Gives greater control over data entry, real-time feedback, interactive online tutorials, games.
    - Browser must be Java-aware.
- JavaScript
  - Most popular scripting language
  - Works with major, popular browsers
  - Embedded into HTML pages for added interactivity
    - Can detect and react to user's actions, with fast execution
    - Creates small programs to control particular aspects of a page, such as rollovers.
Your Website

Part of final project
Plan five pages and execute two:
- Home page
  - Text: Blurbs, quick-read index
  - Graphic (at least one) and colour
  - Link to at least one other page in your website
  - mailto: link to your email address
    - mailto:yourname@nus.edu.sg
- Second page
  - At least one graphic
  - Links
    - within the page (to top) as well as back home.
    - to other websites on www.
    - Transparent inline links.
      - Links within body of text, not in a list.
    - Byline that is mailto: link to your email address
  - Formatting
    - Bold
    - Italics

Planning your website

Justification or creative brief
Start with storyboard
- List contents of each page
- Determine how these pages will be linked together (schematic or diagram)
- Recurring graphics, logos, nav bar.
Sketch of home page layout
- Superimpose table layout
- Exercise on class website

Back to top

Back to Lectures Index

Lectures > The WWW The World Wide Web Dr. Linda M. Perry, Charlene Wee and Aaron Ng

Lectures > The WWW

The World Wide Web
Dr. Linda M. Perry, Charlene Wee and Aaron Ng