Transcript Internet Web Pages

Chapter 17
Websites and
Online Environments
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Websites & the Problem
-Solving Approach
 Plan by considering audience
 Research the problem to determine
the information
 Draft and design the site to
communicate effectively
 Review and edit the website after
soliciting feedback
 Distribute by publishing online
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Basic Differences Between
Print and Web
 Size and dimension
 Navigational features
 Visual components
 Multimedia
 Accessing speed
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Intranet Web Pages
 Serve a smaller, more easily defined audience
 Are usually not designed to sell products
 Are often information-heavy and graphically
light
 Often rely on a standard format
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Internet Web Pages
 Often contain more introductory or contextual
information about your company
 Are more likely to contain “splash” pages to
introduce the site or company
 Are more likely to use design variations and
textual elements to create reader interest
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Internet Web Pages
 May contain a greater number of textual
elements, visuals, and multimedia
 Are more likely to include branding or marketing
information to identify the company to potential
customers
 Are more likely to provide clear navigational
features, since readers can be more diverse
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Web Terminology
 Web page: a document that is made available through
the internet (or intranet)
 Web browser: a program that reads web pages
 URL (Uniform Resource Locator): a website’s unique
address
 Home page: the main page users see when they access
a website
 Hypertext: any text that is linked
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Web Terminology
 Link: a connection from one web page to another
 Interface: the intersection between an individual
system and the larger network
 Navigation: the way in which a reader is directed
to move through various web pages
 Search Engine: an application that locates and
lists web pages containing information relevant to
the reader’s search parameters
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Web Terminology
 Site Architecture: the structure of an entire site
 Site Map: a web page that describes the
architecture of the entire Web site
 Server space: the physical space where web page
information is housed
 Cookies: software that stores visitor information
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
HTML
 Is the basic “language” for web page writing
 Stands for “Hypertext Markup Language”
 Uses codes called “tags” presented in <brackets>
 Provides structural, presentational, and
hypertextual codes that tell a browser how to
display a web page
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Basic Website Tags
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
XHTML
 Stands for “Extensible Hypertext Markup Language”
 Is rapidly becoming the standard for web pages
 Is “extensible,” meaning that users can expand or
add to its capabilities
 Uses stricter syntactical codes than HTML
 Leads to fewer errors in presentation
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Tables and Frames
 Tables:
 Place text and visuals on specific portions of a page,
like in rows and columns
 More accurately control how a page is presented
 Frames:
 Display information from separate data sources
 Are rarely used due to difficulties with search engines
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
CSS
 Stands for “Cascading Style Sheets”
 Provides a given style throughout a web site
 Allows writers to keep style files separate from
HTML files to improve speed, accessibility,
customization, and maintenance
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Web Authoring Programs
 Are designed to assist web page construction
without the need to know HTML and CSS
 Are usually as simple to use as word processors
 Often used to create extensive or complex web
sites that would take too long to code
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Javascript
 Can be inserted into HTML documents to create
“dynamic content” in a website
 Can also be used to “react” to events, such as
loading an image after a specific amount of time
 Is sometimes used to detect or save information
about the readers of a web site
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
CGI
 Is an acronym for “Common Gateway Interface”
 Are programs executed in real-time, so that they
can transmit and receive dynamic information
 Can allow designers to create shopping carts,
page counters, guestbooks, order and complaint
forms, and response sheets
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
CMS
 Are “Content Management Systems”
 Are programs that allow for collaborative writing
of web pages
 Are used to create virtual meeting spaces, image
galleries, blogs, and podcasts
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Plugins
 Are small computer programs that interact with
a web browser
 Allow the browser to display certain types of
documents, show interactive images, play music,
or play video
 Add multimedia functionality to web pages
 Are generally free and can be easily downloaded
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Standard Web Page
Components







Continuity and branding
Navigation
Splash pages and homepages
Nodes and subpages
Search Optimization and Metatags
FAQs and Sitemaps
Color
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Continuity and Branding
 For commercial sites in particular, be conscious
of continuity in the design and the importance of
establishing the brand
 Make sure the flow through a site is
uninterrupted
 Use repetition of key elements for branding
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Navigation
 Make navigational cues informative and clear
 Use a consistent navigation bar
 Design tabs to show navigation options
 Consider a search field for large or complex sites
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Splash Pages & Homepages
 Splash Pages
 Create interest and reinforce branding by
demonstrating creativity here
 Offer options to navigate directly to the homepage
 Homepages
 Offer an overview of the site and its offerings
 Make the design clean, navigable, and substantive
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Nodes & Subpages
 Nodes
 Think of them as “mini-homepages” that introduce
readers to specific topics
 Maintain a consistent design among them
 Subpages
 Offer the more specific, detailed information here
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Search Optimization
and FAQs
 Search Optimization and Metatags
 Optimize by registering with search engines and
ensuring clean code
 Use metatags, like keywords, to help search engines
find and catalog the site
 FAQs and Sitemaps
 Anticipate questions and group them if necessary
 Offer a visual diagram to aid navigation if your site is
extensive
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Color
 Use RGB (hexadecimal) color codes
 Make choices that emphasize continuity and
readability
 Use color choices to highlight hyperlinks
 Consider accessibility issues
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Organizing a Website
 Non-sequential organization emphasizes multiple
connections among topics or ideas.
 Hierarchical organization groups pages by levels and
sublevels, resembling a pyramid.
 Network organization interconnects all of the pages for
maximum flexibility.
 Begin by sketching, using a large sheet of paper, a
chalkboard, or a whiteboard.
 Consider the structure that best expresses the web site’s
main idea.
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Websites and Usability
 Address navigation: make sure users know
where they are in a site and how to get around
 Address content: make it clear and consistent
throughout, without overloading the page
 Address visuals: make sure they pertain to the
content and do not overwhelm the users
 Address other aspects, like branding
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.
Website Ethics
 Ensure accessibility for those with disabilities
 Present a fair company image
 Provide accurate information to the public
Dobrin / Weisser / Keller: Technical Communication in the Twenty-First Century.
© 2010 Pearson Education. Upper Saddle River, NJ, 07458. All Rights Reserved.