Transcript Chapter 1 Variables in the Web Design Environment

Chapter 1
Variables in the Web Design
Environment
Principles of Web Design
Chapter 1
Objectives
• Describe the current state and design
limitations of HTML
• Learn how XML and XHTML could transform
the Web
• Describe how Web browsers affect the way
users view your site
• Decide if you should use an HTML editor to
create markup code
2
Principles of Web Design
Chapter 1
Objectives
• Describe how screen resolution and
connection speed affect the user’s browsing
experience
• Clear the cache when testing your site
3
Principles of Web Design
Chapter 1
HTML: Then and Now
• HTML is an application of the Standard
Generalized Markup Language
• Intended to represent simple document
structure
• Uses hypertext to link related topics
• Designed for use over the internet
• The document expression capabilities of
HTML are currently pushed to the limit
4
Principles of Web Design
Chapter 1
HTML as a Markup Language
• A markup language is a structured language
that lets you identify common sections of a
document such as headings, paragraphs, and
lists.
• An HTML file includes text and HTML markup
elements
• The browser interprets the HTML markup
elements and displays the results, hiding the
actual markup tags from the user
5
Principles of Web Design
Chapter 1
HTML as a Markup Language
• HTML is an open, non-proprietary, crossplatform compatible language
• HTML is not a What You See Is What You Get
(WYSIWYG) layout tool.
• HTML was intended only to express logical
document structure, not display
characteristics
6
Principles of Web Design
Chapter 1
Deprecated Elements
• Deprecated elements are elements that the
W3C has identified as obsolete. They will not
be included in future releases of HTML
• Some examples of these elements are
<FONT> and <CENTER>
7
Principles of Web Design
Chapter 1
Understanding XML
• XML is the Extensible Markup Language
• XML is a meta-language; not a language
itself, but a language that let’s you describe
other languages
• XML Describes Data, not Presentation
• XML Allows Better Access to Data
• XML Lends Itself to Customized Information
8
Principles of Web Design
Chapter 1
XHTML: The Future of HTML
• XHTML is the Extensible Hypertext Markup
Language
• HTML as an Application of XML
• Improved Data Handling
• Style Sheets are Required
9
Principles of Web Design
Chapter 1
How Browsers Affect Your Work
• One of the greatest challenges facing HTML
authors is designing pages that display
properly in multiple browsers
• Every browser contains a program called a
parser that interprets the markup tags in an
HTML file and displays the results in the
canvas area of the browser interface
10
Principles of Web Design
Chapter 1
11
Principles of Web Design
Chapter 1
How Browsers Affect Your Work
• The logic for interpreting the HTML tags is
different in every browser, resulting in varying
interpretations of the way the HTML file is
displayed
• Although it’s a good idea to test with the latest
browsers, it’s also prudent to test your work in
older browsers as well
12
Principles of Web Design
Chapter 1
How Browsers Affect Your Work
• Lowest common denominator coding - use an
older version of HTML to ensure portability
• Cutting-edge coding - push the medium
forward by coding to the latest standard and
using the latest enhancements
• Browser-specific coding - specify a particular
brand and version of browser to access the
site
13
Principles of Web Design
Chapter 1
Solving the Browser Dilemma
• You must test your work in as many browsers
as possible during and at the end of the
development process to make sure that your
pages will render properly
14
Principles of Web Design
Chapter 1
Should You Use an HTML Editor?
• You can create or generate HTML code to
build Web pages in many ways
• Many sites on the Web are coded using
simple text editing tools such as Notepad
• Many different HTML editing programs are
now available
15
Principles of Web Design
Chapter 1
Should You Use an HTML Editor?
• As with the browsers, authoring packages
interpret tags based on their own built-in
logic. Therefore, a page that you create in an
editing package may look quite different in the
editing interface than it does in a browser
• You’ll probably end up working with a
combination of tools to create your finished
pages
16
Principles of Web Design
Chapter 1
Coding for Multiple Resolutions
• A computer monitor’s screen resolution is
the horizontal and vertical width and height of
the computer screen in pixels
• The three most common screen resolutions
(traditionally expressed as width x height) are
640 x 480, 800 x 600, 1024 x768
• User screen resolution is a factor over which
you have no control
17
Principles of Web Design
Chapter 1
Fixed Resolution Design
• As the screen resolution changes, the content
remains aligned to the left side of the page
18
Principles of Web Design
Chapter 1
19
Principles of Web Design
Chapter 1
20
Principles of Web Design
Chapter 1
21
Principles of Web Design
Chapter 1
Flexible Resolution Design
• As the screen resolution changes, the content
expands to accommodate the varying screen
width
22
Principles of Web Design
Chapter 1
23
Principles of Web Design
Chapter 1
24
Principles of Web Design
Chapter 1
25
Principles of Web Design
Chapter 1
26
Principles of Web Design
Chapter 1
Bandwidth Concerns
• It is a myth that most computer users will
soon have fast access to the Web
• Less than 20% of American households have
access to cable modems
• Only 5-10% of all the households have
access to Digital Subscriber Line (DSL)
27
Principles of Web Design
Chapter 1
28
Principles of Web Design
Chapter 1
Bandwidth Concerns
• If your pages download slowly, your users will
probably click to another site before they see
your content
• Most users will simply not wait longer than 20
seconds for a page to load
• The size and number of graphics on your
Web pages influences the speed at which
your pages display
29
Principles of Web Design
Chapter 1
Testing for Download Times
• Test your site at different connection speeds
• Test your site as if you were a user visiting for
the first time. This is when users experience
the longest download times.
• Clear your cache of the files and images that
the browser has stored
30
Principles of Web Design
Chapter 1
31
Principles of Web Design
Chapter 1
32
Principles of Web Design
Chapter 1
Summary
• Decide which version of HTML you’ll use to
code your pages
• Decide whether to use Cascading Style
Sheets
• Choose the suite of browsers you will use to
test your site
• Decide how browser-specific your site will
be. Your goal is to create a site that is widely
accessible to multiple browsers
33
Principles of Web Design
Chapter 1
Summary
• Choose the type of editing tool you will use
to create your HTML code
• Resolve to continually test your work as you
build your site
• Test with multiple browsers, at different
screen resolutions, and at different
connection speeds
• If you can, try to view your site on multiple
platforms, such as PC and Macintosh as well
34