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:
A paragraph in HTML is defined like this
This is a Paragraph
Who is Making the Web Standards?
The Web standards are
not made up
Netscape or Microsoft by 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
2.
3.
4.
1.
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
Design Document – A document with the entire plan for the website. It includes a flowchart and storyboard.
Flowchart
Storyboards
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 tag
s.com/images/email.gif
width="..." height="..."> Using a Relative URL in an tag
Web Browsers
5 Major Browsers 1.
2.
3.
4.
5.
Internet Explorer (Microsoft) Firefox (Mozilla) Opera Safari (Mac) Chrome (Google)
2009
September
2008
November
2007
November
2006
November
2005
November
2004
November
2003
November
2002
November
Web Browsers
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
20.0%
IE6
33.6%
IE6
49.9%
IE5
6.2%
IE5
10.2%
IE5
13.7%
IE5
29.9%
IE8
12.2%
IE5 IE5
1.6%
IE5
3.6%
Firefox
23.6%
Mozilla
16.5%
Mozilla
7.2%
AOL
5.2%
Firefox
46.6%
Firefox
44.2%
Firefox
36.3%
Firefox
29.9%
Mozilla
2.8%
N3
0.2%
N3
0.5% 1.1%
N3 Chrome
7.1%
Chrome
3.1%
Mozilla
1.2%
Mozilla
2.5%
N7
0.4%
N7
1.2%
N7
1.6% 4.9%
N5 Safari
3.6%
Safari
2.7%
Safari
1.8%
N7/8
0.2%
O8
1.3%
N4
0.3%
N4
0.5% 2.0%
N4 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
January 2009 January 2008 January 2007 January 2006 January 2005 January 2004 January 2003 January 2002 January 2001 January 2000
Higher
57% 38% 26% 17% 12% 10% 6% 6% 5% 4%
1024x768
36% 48% 54% 57% 53% 47% 40% 34% 29% 25%
800x600
4% 8% 14% 20% 30% 37% 47% 52% 55% 56%
640x480
0% 0% 0% 0% 0% 1% 2% 3% 6% 11%
Unknown
3% 6% 6% 6% 5% 5% 5% 5% 5% 4%
DTD = DOCTYPE Declaration
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
Transitional
Frameset
XHTML 1.0 DTDs
Strict
Transitional
Frameset
Other Web Concepts
Meta Tags Alt Tags Deprecated Elements – Phased out and discouraged from use.
Web 2.0
Forms CGI, SSL, HTTPS