Transcript Web Design Concepts

Web Design Concepts
By Josh Gallagan
The Internet
The Internet



The Internet is a global system of interconnected
computer networks that use the standardized Internet
Protocol Suite (TCP/IP) to serve billions of users
worldwide.
It is a network of networks that consists of millions of
private and public, academic, business, and government
networks of local to global scope that are linked by
copper wires, fiber-optic cables, wireless connections,
and other technologies.
The Internet carries large amounts of information
resources and services, most notably the inter-linked
hypertext documents of the World Wide Web (WWW)
and the infrastructure to support electronic mail.
History of the Internet
 Started
in 1969 as ARPANET. A Military
and National Science Foundation
experiment to connect all its computers.
 ARPANET connected 2 computer
networks in California. This was the birth
of what we now know as the internet.
Internet vs The Web

The Internet and the World Wide Web are not
one and the same.
 The Internet is a global system of interconnected
computer networks.
 In contrast, the Web is one of the services that
runs on the Internet.
 The Web is a collection of interconnected
documents and other resources, linked by
hyperlinks and URLs. The Web is an application
running on the Internet.
WWW - The World Wide Web
 The
computers on the Web communicate
using standard protocols and languages.
 The W3C (The World Wide Web
Consortium) are making the rules and
standards for the Web.
 All the computers use a communication
standard called HTTP = Hyper text
transfer protocol.
History of The WWW

English physicist Tim Berners-Lee, now the
Director of the World Wide Web Consortium,
wrote a proposal in March 1989 for what would
eventually become the World Wide Web.
 He was later joined by Belgian computer
scientist Robert Cailliau while both were working
at CERN in Geneva, Switzerland.
 In 1990, they proposed using "HyperText [...] to
link and access information of various kinds as a
web of nodes in which the user can browse at
will", and released that web in December.
How Does the WWW Work?





Web information is stored in documents called
Web pages
Web pages are files stored on computers called
Web servers
Computers reading the Web pages are called
Web clients
Web clients view the pages with a program
called a Web browser
Popular browsers are Internet Explorer and
Mozilla Firefox
Size of The World Wide Web
The Indexed Web contains at least 19.23 billion pages (Wednesday, 14 October, 2009).
From worldwidewebsize.com
How Does the Browser Fetch
the Pages?
 A browser
fetches a Web page from a
server by a request
 A request is a standard HTTP request
containing a page address
 A page address looks like:
http://www.someone.com/page.htm
How Does the Browser
Display the Pages?





All Web pages contain instructions on how to be
displayed
The browser displays the page by reading
these instructions
The most common display instructions are called
HTML tags
The HTML tag for a paragraph looks like this:
</p>
A paragraph in HTML is defined like this <p>This
is a Paragraph</p>
Who is Making the Web
Standards?






The Web standards are not made up by
Netscape or Microsoft
The rule-making body of the Web is the W3C
W3C stands for the World Wide Web
Consortium
W3C puts together specifications for Web
standards
The most essential Web standards are HTML,
CSS and XML
The latest HTML standard is XHTML 1.0
What is W3C








W3C Stands for the World Wide Web
Consortium
W3C was created in October 1994
W3C was created by Tim Berners-Lee
W3C was created by the Inventor of the Web
W3C is organized as a Member Organization
W3C is working to Standardize the Web
W3C creates and maintains WWW Standards
W3C Standards are called W3C
Recommendations
Web Page Accessibility

Deals with making web pages easy to access for
the blind, deaf, physically handicapped
The Web Accessibility Initiative – WAI

WAI – Web Accessibility Initiative (created by
W3C, in 1997) is a set of guidelines intended for
web developers, authors, and designers- about
how to make the web content accessible to
people with disabilities.Also WCAG.

Section 508 – US Law – Everyone must have
equal access to technology.
Accessibility






The needs that Web accessibility aims to address include:
Visual: Visual impairments including blindness, various common
types of low vision and poor eyesight, various types of color
blindness;
Motor/Mobility: e.g. difficulty or inability to use the hands, including
tremors, muscle slowness, loss of fine muscle control, etc., due to
conditions such as Parkinson's Disease, muscular dystrophy,
cerebral palsy, stroke;
Auditory: Deafness or hearing impairments, including individuals
who are hard of hearing;
Seizures: Photoepileptic seizures caused by visual strobe or
flashing effects.
Cognitive/Intellectual: Developmental disabilities, learning
disabilities (dyslexia, dyscalculia, etc.), and cognitive disabilities of
various origins, affecting memory, attention, developmental
"maturity," problem-solving and logic skills, etc.;
The Web Design Process
1.
2.
3.
4.
5.
Define – Define you audience and consult
with the client.
Structure – Flowchart/Sketches
Design – Storyboarding
Build and Test – Site Production/Usability
Testing/Revision/Final Presentation to Client
Launch – Site goes online (FTP)
The Process
Concepting
Document – A document with
the entire plan for the website. It
includes a flowchart and storyboard.
 Flowchart
 Storyboards
 Design
Concepting
Flowchart – The map of the website and
how the pages flow.
Concepting
Storyboard – A map of where things will be
placed on the webpage.
Front End vs Back End
 Front
End = Design (Fireworks)
 Back
End = Coding (Notepad)
GUI or WYSIWYG (HTML Editor)
vs Hand Coding (Text Editor)




WYSIWYG = What you see is what you
get. Dreamweaver
GUI = Graphical User Interface.
Dreamweaver.
Text Editor = Notepad
CSS = Cascading Style Sheets
My Name is URL –

Web Page Addresses (URL)
Absolute vs Relative

URL = Uniform Resource
Locator. Basically it is a web
page address.


Using an Absolute URL in an
<IMG> tag
<IMG SRC=
http://www.webdevelopersnote
s.com/images/email.gif
width="..." height="...">
Using a Relative URL in an
<IMG> tag
<IMG SRC="/images/email.gif"
width="..." height="...">
Web Browsers
5 Major Browsers
1.
2.
3.
4.
5.
Internet Explorer (Microsoft)
Firefox (Mozilla)
Opera
Safari (Mac)
Chrome (Google)
Web Browsers
2009
September
2008
November
2007
November
2006
November
2005
November
2004
November
2003
November
2002
November
IE7
15.3%
IE7
26.6%
IE7
20.8%
IE7
7.1%
IE6
62.7%
IE6
66.0%
IE6
71.2%
IE6
53.5%
IE6
12.1%
IE6
IE8
12.2%
IE5
20.0%
IE6
33.6%
IE6
49.9%
IE5
6.2%
IE5
10.2%
IE5
13.7%
IE5
29.9%
Firefox
46.6%
Firefox
44.2%
IE5
1.6%
IE5
3.6%
Firefox
23.6%
Mozilla
16.5%
Mozilla
7.2%
AOL
5.2%
Firefox
36.3%
Firefox
29.9%
Mozilla
2.8%
N3
0.2%
N3
0.5%
N3
1.1%
Chrome
7.1%
Chrome
3.1%
Mozilla
1.2%
Mozilla
2.5%
N7
0.4%
N7
1.2%
N7
1.6%
N5
4.9%
Safari
3.6%
Safari
2.7%
Safari
1.8%
N7/8
0.2%
O8
1.3%
N4
0.3%
N4
0.5%
N4
2.0%
Opera
2.2%
Opera
2.3%
Opera
1.6%
Opera
1.5%
O7
0.2%
O7
1.6%
O7
1.9%
IE4
Web Servers and FTP
 Web
Server is a computer program that is
responsible for accepting HTTP requests
from clients, which are known as web
browsers, and serving them HTTP
responses.
 A Web Server can also be a computer that
runs a computer program as described
above.
Web Servers and FTP
 FTP
= File Transfer Protocol
 An FTP progam sends files saved locally
to a server that broadcasts over the entire
Web.
 Examples of FTP Programs
WS FTP, CUTE FTP, IE, Filezilla
Filezilla
Common Monitor Resolutions
 How
a person sets their monitor resolution
will change how a web page appears on
the screen.
Common Monitor Resolutions
The current trend is that more and more computers
are using a screen size of 1024x768 pixels or more:
Date
Higher
1024x768
800x600
640x480
Unknown
January 2009
57%
36%
4%
0%
3%
January 2008
38%
48%
8%
0%
6%
January 2007
26%
54%
14%
0%
6%
January 2006
17%
57%
20%
0%
6%
January 2005
12%
53%
30%
0%
5%
January 2004
10%
47%
37%
1%
5%
January 2003
6%
40%
47%
2%
5%
January 2002
6%
34%
52%
3%
5%
January 2001
5%
29%
55%
6%
5%
January 2000
4%
25%
56%
11%
4%
DTD = DOCTYPE Declaration
<!DOCTYPE> Is Mandatory to Validate
Document Type Definitions (DTD)
•A DTD specifies the syntax of a web page in SGML
•DTDs are used by SGML applications, such as HTML, to
specify rules for documents of a particular type, including
a set of elements and entity declarations
•An XHTML DTD describes in precise, computer-readable
language, the allowed syntax of XHTML markup
DTD = DOCTYPE Declaration
There are three DTDs:
1. STRICT
Use the strict DOCTYPE when you want really clean markup, free of
presentational clutter. Use it together with CSS.
2. TRANSITIONAL
Use the transitional DOCTYPE when you want to still use HTML's
presentational features.
3. FRAMESET
Use the frameset DOCTYPE when you want to use HTML frames.
HTML 1.0 DTDs
Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 DTDs
Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Other Web Concepts
 Meta
Tags
 Alt Tags
 Deprecated Elements – Phased out and
discouraged from use.
 Web 2.0
 Forms
 CGI, SSL, HTTPS