Transcript Web Design 101 - Northern Illinois University

Introduction to Web
Development
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.
2
W3C
• W3C provides the current specification
for HTML along with proposals for
future additions to HTML.
• http://www.w3.org.
3
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.
4
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)
5
Internet History
(The "Cliff Notes" Version)
• For the most part, only defense
contractors and academic institutions
used ARPANET.
6
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.
7
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.
8
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.
9
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.
10
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.
11
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.
12
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.
13
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.
14
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, UrbanaChampaign.
– Designed primarily for viewing HTML
documents, plus built-in tools to access
other resources, such as FTP (more later).
15
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.
16
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.
17
The Nuts and Bolts of
Internet Communications
• As with all other communications
protocols, TCP/IP is composed of
layers…
18
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?
19
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.
20
The Nuts and Bolts of
Internet Communications
• Each networked device has its own
unique IP address (destination
address), used to route data packets.
– Example: 208.77.188.16
• New version, IPv6, uses 128 bits.
– Supported by current operating systems,
not so much on other devices like home
networking routers, network peripherals,
etc.
– Conversion is problematic, ongoing.
21
DNS, Domains, and Hosts
• IP addresses like 147.132.42.18 aren't
not convenient for humans to use or
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!
22
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.
Essentially aliases:
– www.amazon.com
– www.yahoo.com
– www.niu.edu
23
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, and other
resources.
24
DNS, Domains, and Hosts
• A host refers to a fully qualified domain
name.
– Example:
www.mydomain.com
25
DNS, Domains, and Hosts
• For example:
http://www.domainname.com/library/filename.html#location
Protocol
Domain type
Server name
Folder
Host
Anchor
(i.e., bookmark)
within the file
File name
26
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.
27
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.
28
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).
29
DNS, Domains, and Hosts
• Examples of geographically-based
domain types:
– .us
– .uk
– .jp
– .in
30
DNS, Domains, and Hosts
• File Name: If omitted, most servers
automatically go looking for index.htm,
index.html, or index.shtml (for serverside includes).
• Other default names can also be set up
by the server administrator.
• Search engine spiders (indexing the
web) also look for those same “index”
files – to your advantage to use these
files names.
31
DNS, Domains, and Hosts
• The DNS system is located on 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.
32
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.
33
Purchasing a Domain Name
• See www.register.com,
www.hover.com, www.godaddy.com to
purchase domain names. (Plenty of
other places, too.)
• Can “park” for later use – cheaper.
• 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.
34
DNS, Domains, and Hosts
• Example:
– entering www.pennymcintire.com
forwards to
http://www.cs.niu.edu/~mcintire/index.html
• Most accounts include at least one
email forwarding account.
• Can easily change domain and email
forwarding – almost instantaneous
response.
35
Clients, Servers, and Browsers
• The Internet connects clients and
servers.
• Clients first…
36
Clients, Servers, and Browsers
• A client refers to both the user’s
browser and the computer upon which
that browser runs.
• Also called the view layer or the
presentation layer.
• Browsers: Internet Explorer, Firefox,
Chrome, Safari, etc.
• The browser’s purpose is to retrieve
and display documents for we humans.
37
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.
38
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.
39
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.
• The DOM keeps track of the characteristics of
each scriptable object – color, style, size, etc. 40
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.
41
Clients, Servers, and Browsers
– Dynamic HTML 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.
42
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 …
43
Clients, Servers, and Browsers
• A server is both:
– 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 box).
44
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,
45
etc.
Clients, Servers, and Browsers
• Note: this class will not teach serverside technology at all, only client-side
technologies; that is, technologies that
run in the user’s browser.
46
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.
47
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, or within Dreamweaver.
• You will use one of these programs to
FTP your files out to our web server.
– See the handout on my webpage, “FTP
Instructions” – please read carefully.
48
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.
49
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.
50
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.
51
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.
52
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 type in Windows XP:
• Windows Explorer > Tools > Folder Options >
File Types, or
• Control Panel > Folder Options.
53
Intranets and Extranets
• An intranet is the implementation of
Internet communication technologies on
an internal network – a "private
Internet."
54
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.
55
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.
56
Internet Security
• SSL (Secure Socket Layer, older) and
TLS (Transport Layer Security, newer):
protocols implemented on a web server
for secure communications: privacy and
reliability between two communicating
applications.
• Indicated in the browser by “https://”
instead of “http://”, and a locked
padlock icon at bottom of the page or
just to the right of the URL box.
57
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.
58
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.
59
How Web Technology is Used
• The type of web sites you are most
accustomed to seeing: public sites that
are selling something or that are
providing “free” information.
• That’s just the tip of the iceberg…
60
How Web Technology is Used
• Also 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).
61
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 – doesn’t
matter what operating system.
– Updating is easier; update the single
version on the server, rather than updating
myriad individual PCs.
62
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.
63
Tools You Need for this Class
• Free tools:
– Adobe’s Dreamweaver (HTML editor), Fireworks
(graphics editor), and Flash (animation editor) in
our CS labs.
• Caution: Native Flash files created in newer versions of
the Flash editor may not be recognized by older versions
of the Flash editor.
– Anyone know a good, free Flash editor?
– SeaMonkey, a free HTML editor.
http://www.seamonkey-project.org/
– Gimp, a free graphics editing package.
http://www.gimp.org/
64
Tools You Need for this Class
• Adobe products:
– Photoshop, if you have access to it, can be
used in place of Fireworks for editing
graphics, but much harder to master.
– Download free, 30-day trial versions of
Adobe software 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.
65
Tools You Need for this Class
– Student pricing:
• Available through the basement service desk of
the NIU Bookstore and through
www.journeyed.com.
– Prices range from $179.00 for standalone
Dreamweaver CS6 to $449 – normally $1799 – for
CS Web Premium (including Dreamweaver, Flash,
Photoshop, Illustrator, Fireworks, and Contribute).
• Creative Cloud membership – everything for
$29.95/month student pricing, 1 year contract:
http://www.adobe.com/education/products/creativeclo
ud.edu.html?showEduReq=no
66
Tools You Need for this Class
• Microsoft’s Expression Studio
– Retail pricing at $149.98.
– Can obtain more cheaply (free?) through
our affiliation with Microsoft's
Academic Alliance software. See
www.cs.niu.edu, near the top right, for
instructions.
67