Download Wed Design I - Planetary Collegium

Web Design
Workshop
The World Wide Web
http://www.isoc.org/internet/history/2002_0918_Internet_History_and_
Growth.ppt
Web 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.
Web Design Workshop
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 Workshop
The World Wide Web
But What is the Internet?
http://img.bleepingcomputer.com/tutorials/dns.jpg
IP = Internet Protocol
ISP = Internet Service Provider
DNS = Domain Name System
Web Design Workshop
The World Wide Web
Brief History of The WWW:
1945
Memex
Conceived
1945
ARPANET
1969
A
Mathematical
Theory of
Communication
1948
TCP/IP
Created
1972
Silicon
Chip
1958
First Vast
Computer
Network
Envisioned
1962
Packet
Switching
Invented
1964
Internet
Named
and
Goes
TCP/IP
1984
WWW
Created
1989
Mosaic
Browser
Created
1993
Hypertext
Invented
1965
Age of
eCommerce
Begins
1995
1995
• History of the Internet.
8:10 min http://www.youtube.com/watch?v=9hIQjrMHTv4
Copyright 2002, William F. Slater, III, Chicago, IL, USA
Web 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 Workshop
Domain Name
What is the Anatomy of an URL?
http://www.wccweb.claudiajacques.org/images/test.jpg
scheme://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 name
wccweb = sub-domain
claudiajacques = domain name
org = domain type
Images = path/ - directory & subdirectory
test.jpg = filename and file extension
Web 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 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 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 Workshop
Domain Name
Confused?
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.
Web 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 Workshop
Flowchart
Web Design Workshop
Flowchart
Web Design Workshop
Flowchart
Web 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 Workshop
Dreamweaver Interface
B
A
A
Menu Bar
B
Insert Bar Short
icons to different
commands
C
G
C
Document Toolbar
D Tag Selector –
Document Window
shows the tag
E
Resolution, zoom,
download options
D
E
F
F Property Inspector
- property options to
selected item
G Panel Groups Tabs to manage
different options
Web Design Workshop
Codes X Design?
Both!!!
Dreamweaver Interface