Web Design Workshop

The World Wide Web

http://www.isoc.org/internet/history/2002_0918_Internet_History_and_Growth.ppt

Web Design WorkshopWeb Design Workshop

The World Wide Web

What was the Victorian Internet?

The Telegraph

• Invented in the 1840s.

• Signals sent over wires that were established over vast distances.

• Used extensively by the U.S. Government during the American Civil War, 1861 – 1865.

• Morse Code was dots and dashes, or short signals and long signals. Still used today for few applications.

• The electronic signal standard of +/- 15 v. is still used in network interface cards today.

The World Wide Web

What is the Internet?

• Network of networks

• Infrastructure for the use of:• e-mail• bulletin boards• file archives • hypertext documents • databases etc..

• Form and act as a single huge network.

• Uses TCP/IP protocols and packet switching. TCP = Transmission Control Protocol / IP = Internet Protocol

Web Design WorkshopWeb Design Workshop

The World Wide Web

But What is the Internet?

Web Design WorkshopWeb Design Workshop

IP = Internet ProtocolISP = Internet Service ProviderDNS = Domain Name System

http://img.bleepingcomputer.com/tutorials/dns.jpg

The World Wide Web

Brief History of The WWW:

1945

1995

Memex Conceived

1945

WWWCreated1989

MosaicBrowserCreated1993

A MathematicalTheory of

Communication1948

Packet Switching Invented1964

SiliconChip1958

First Vast ComputerNetwork

Envisioned1962

ARPANET1969

TCP/IPCreated1972

InternetNamed and Goes

TCP/IP1984

HypertextInvented1965

Age ofeCommerceBegins1995

Copyright 2002, William F. Slater, III, Chicago, IL, USA

• History of the Internet. 8:10 min http://www.youtube.com/watch?v=9hIQjrMHTv4

Web Design WorkshopWeb Design Workshop

Domain Name

What is an URL? http://www.wccweb.claudiajacques.org

• Uniform Resource Location – uniform way to locate a resource on the internet.

• The URL specifies the address of a file and every file on the Internet has a unique address.

• Web software, such as your browser, use the URL to retrieve a file from the computer on which it resides.

Web Design WorkshopWeb Design Workshop

Domain Name

What is the Anatomy of an URL?

http://www.wccweb.claudiajacques.org/images/test.jpgscheme://site address/path/filename & extension

scheme – Also called resource type. Besides http = hypertext transport protocol, there are also ftp, File, mailto, news, telnet, Golpher.

www = site address - Consists of host computer namewccweb = sub-domainclaudiajacques = domain nameorg = domain type

Images = path/ - directory & subdirectory

test.jpg = filename and file extension

Web Design WorkshopWeb Design Workshop

Domain Name

What is Domain Name Registrar?• Domain name registrar is an organization or commercial entity, accredited by the Internet Corporation for Assigned Names and Numbers (ICANN) or by a national country code top-level domain (ccTLD) authority, to manage the reservation of Internet domain names in accordance with the guidelines of the designated domain name registries and offer such services to the public.

• Until 1999, Network Solutions was the domain name registry for .com, . net and .org as well as the sole registrar.

• An end-user cannot directly register a domain and manage their domain information with ICANN.

http://en.wikipedia.org/wiki/Domain_name_registrar

Web Design WorkshopWeb Design Workshop

Domain Name

Domain Name Registrar:• Only the designated registrar may modify or delete information about a domain name.

• The competition that the SRS – Shared Registration System - created enables end users to choose from many registrars offering different services at varying prices.

• It is not unusual for an end user to switch registrars which invokes a domain transfer process governed by specific domain name transfer policies.

• Examples of Domain Name Registrars: GoDaddy, eNom, Tucows, Network Solutions, Names4ever, etc. http://www.domaintools.com/internet-statistics/registrar-stats-2007.php

http://en.wikipedia.org/wiki/Domain_name_registrar

Web Design WorkshopWeb Design Workshop

Domain Name

Domain Name Registry:• Is a database of all domain names registered in a top-level domain.

• A registry operator, also called a Network Information Center (NIC), is the part of the Domain Name System (DNS) of the Internet that keeps the database of domain names, and generates the zone files which convert domain names to IP addresses.

• Domain names are managed under a hierarchy headed by the Internet Assigned Numbers Authority (IANA), which manages the top of the DNS tree by administrating the data in the root name servers.

• Most Domain Name Registrars also offer Domain Name Registry.

• The allocated and assigned domain names are made available by registries by use of the WHOIS system and via their domain name servers.

Web Design WorkshopWeb Design Workshop

Domain Name

To develop a web site you need:

1.A Domain Name Registrar to register a domain name Domain Name Registry (Domain Hosting).

2.A Web Hosting Provider/Server Provider to manage the communication of your domain name with the net.

3.Now a days the process is transparent if you contract a web hosting provider. (Remember that most companies offer both services at once when you host your site with them.) GoDaddy, Hostmonster, BlueHost, Names4Ever, Network Solutions, are some of the reliable hosting providers.

4.Last, but not least: you need to design your site.

Confused?

Web Design WorkshopWeb Design Workshop

Designing a Site? Flowchart to Sketches

Flowcharts are visual outlines of the content “linkability” and functionality.

Sketches allow you to work on page organization, design and functionality in a quick and easy way.

Web Design WorkshopWeb Design Workshop

Flowchart

Web Design WorkshopWeb Design Workshop

Flowchart

Web Design WorkshopWeb Design Workshop

Flowchart

Web Design WorkshopWeb Design Workshop

HTML?HTML

HTML = HyperText Markup Language is a text and image formatting language used by web browsers to dynamically format web pages. It consist of “tags” surrounded by angle brackets and is not considered a language per se.

HyperText means text in the HTML document carries a link to a different location.

Markup means that specific portions of a document are marked up to indicate how they should be displayed in the browser.

<!doctype html> <html> <head> <title>Web Design I</title> </head> <body> <p>Hello World!</p> </body> </html> .

Web Design WorkshopWeb Design Workshop

Dreamweaver Interface

C

A Menu Bar

B Insert Bar Short icons to different commands

C Document Toolbar

D Tag Selector – shows the tag

E Resolution, zoom, download options

F Property Inspector - property options to selected item

G Panel Groups -Tabs to manage different options

B

D

F

A

E

Document Window

G

Web Design WorkshopWeb Design Workshop

Dreamweaver InterfaceCodes X Design?Both!!!

Web Design WorkshopWeb Design Workshop