Transcript Document

XP
HTML: The Language of the Web
• A Web page is a text file written in a language called
Hypertext Markup Language.
• A markup language is a language that describes a
document’s structure and content.
• HTML is not a programming language or a formatting
language.
• Styles are format descriptions written in a separate language
from HTML that tell browsers how to render each element.
Styles are used to format your document.
1
XP
The History of HTML
• The first version of HTML was created using the
Standard Generalized Markup Language (SGML).
• In the early years of HTML, Web developers were
free to define and modify HTML in whatever ways
they thought best.
• Competing browsers introduced some differences in
the language. The changes were called extensions.
2
XP
The History of HTML
• A group of Web developers, programmers, and
authors called the World Wide Web Consortium, or
the WC3, created a set of standards or specifications
that all browser manufacturers were to follow.
• The WC3 has no enforcement power.
• The recommendations of the WC3 are usually
followed since a uniform approach to Web page
creation is beneficial to everyone.
3
XP
Versions of HTML and XHTML
4
XP
The History of HTML
• Older features of HTML are often deprecated, or
phased out, by the W3C. That does not mean you
can’t continue to use them—you may need to use
them if you are supporting older browsers.
• Future Web development is focusing increasingly on
two other languages: XML and XHTML.
• XML (Extensible Markup Language) is a
metalanguage like SGML, but without SGML’s
complexity and overhead.
5
XP
The History of HTML
• XHTML (Extensible Hypertext Markup Language)
is a stricter version of HTML and is designed to
confront some of the problems associated with the
different and competing versions of HTML.
• XHTML is also designed to better integrate HTML
with XML.
• HTML will not become obsolete anytime soon.
6
XP
Guidelines
• Become well-versed in the history of HTML.
• Know your market.
• Test.
7
Tools for Creating
HTML Documents
XP
• Basic text editor like Notepad.
• HTML Converter - converts formatted text into HTML
code.
 Can create the source document in a word processor
and then convert it.
 HTML code created using a converter is often longer
and more complicated than it needs to be, resulting in
larger-than-necessary files.
8
XP
Tools for Creating
HTML Documents
• HTML Editor – helps you create an HTML file by
inserting HTML codes for you as you work.
 They can save you a lot of time and help you work
more efficiently.
 Advantages and limitations similar to those of HTML
converters.
 Allow you to set up a Web page quickly.
 Will usually still have to work with HTML code to create
a finished document.
9
XP
Identify Content Needs
• Required information is identified
• Grouped into business schemes related to the business
structure
• This becomes:
 The information hierarchy (information structure and related
links)
• Content requirements are determined for each process.
10
XP
Plan Information Hierarchy
• Cluster information in related topics.
• The hierarchy of pages are identified.
 Develop a hierarchy of information and check data to confirm
sequence of hierarchy.
• Content is logical and accessible to customers.
 Labels are clear, consistent and coherent and relatively intuitive for
users to access.
 A consistent and logical labelling system is developed taking into
account user demographics.
11
XP
Develop Navigation System
• Build navigational system for overall website based on business
requirements.
• Navigation should:
 be easy to use
 provide different ways of searching
 provide feedback to users
• Navigation between pages is consistent and clear.
• The navigational system should give users the flexibility to find the
information/products they want.
12
Site Look
XP
• Site look is appropriate to business:
 Business image
 Logo
 Colour scheme etc
• Appropriate to customer requirements:
 Age range
 Culture
 Accessibility Issues
13
Develop Process Flow
XP
• Develop in a logical and simple manner:





Find product
Put in shopping cart
Continue shopping/buying
Arrange delivery
Make payment
14
XP
Working with Web Site Structures
• A storyboard is a diagram of a Web site’s structure, showing
all the pages in the site and indicating how they are linked
together.
• It is important to storyboard your Web site before you start
creating your pages in order to determine which structure
works best for the type of information the site contains.
• A well-designed structure can ensure that users will be able
to navigate the site without getting lost or missing important
information.
15
XP
Working with Web Site Structures
The three chemistry pages
16
XP
Linear Structures
• In a linear structure, each page is linked with the
pages that follow and precede it in an ordered chain.
• Linear structure works best for Web pages with a
clearly defined order.
• In an augmented linear structure, each page
contains an additional link back to an opening page.
17
XP
Linear Structures
A linear structure
An augmented linear
structure
18
XP
Hierarchical Structures
• In the hierarchical structure, the pages are linked
going from the most general page down to more
specific pages.
• Users can easily move from general to specific and
back again.
• Within this structure, a user can move quickly to a
specific scene within the page, bypassing the need to
move through each scene in the play.
19
XP
Hierarchical Structures
20
XP
Mixed Structures
• As Web sites become larger and more complex, you
often need to use a combination of several different
structures.
• The overall form can be hierarchical, allowing the
user to move from general to specific; however, the
links also allow users to move through the site in a
linear fashion.
21
XP
Mixed Structures
22
XP
Working with Web Site Structures
• A little foresight can go a long way toward making
your Web site easier to use.
• Each page should contain, at minimum, a link to the
site’s home page, or to the relevant main topic page,
if applicable.
• You may want to supply your users with a site index
which is a page containing an outline of the entire site
and its contents.
23
XP
Creating an HTML Document
• It is a good idea to plan out a Web page before you
start coding.
• Draw a planning sketch or create a sample document
using a word processor.
 This is called Storyboarding
• Preparatory work can weed out errors or point to
potential problems.
24
XP
Creating an HTML Document
25
XP
Creating an HTML Document
• In planning, identify a document’s different elements.
An element is a distinct object in the document, like a
paragraph, a heading, or a page’s title.
• Formatting features such as boldfaced font, and
italicized text may be used.
26
XP
Displaying an HTML File
• As you work on a Web page, you should occasionally
view it with your Web browser to verify that the file
contains no syntax errors or other problems.
• You may want to view the results using different
browsers to check for compatibility.
27
XP
Elements Tested
• Test against customer needs:







Search engine key words appropriate
Site map easy to find and use
FAQ section relevant
Content of news sections appropriate
Business critical aspects easily recognised and accessed
Logins, forms, shopping carts etc.
Accessibility issues addressed
28
XP
Design Documentation
•
•
•
•
•
•
•
•
User analysis documentation
Strategic Brief
Technical Brief
Functional Brief
 Functional Spec
 Engineering Spec
Creative Brief
 Creative Spec
 Storyboard
 Wireframe
Content Plan
Technical Spec
Markup and Layout Spec
29