REVISION
Sotiris Charalambous
Overview
PART A –
MULTIPLE
CHOICE
QUESITONS (30%)
PART B – TRUE OR
FALSE QUESTIONS
(20%)
PART C – SHORT
ANSWERS
QUESTIONS (50%)
2
The Internet and the World Wide
Web
◦The Internet is a worldwide public network that
connects millions of these private networks.
3
The Internet and the World Wide
Web
◦The World Wide Web, or Web, consists of a worldwide
collection of electronic documents (Web pages)
◦A Web page can contain images, text, interactive
elements, and hyperlinks, which are links to other pages.
◦A Web site is a group of related Web pages.
◦Web 2.0 refers to Web sites that provide a means for users
to interact
4
The Internet and the World Wide
Web
◦A hyperlink, is a word, phrase, or image that connects
Web pages.
◦You often can identify a text link by its appearance.
◦An image link might be more difficult to visually identify
◦Exploring the Web by jumping from one Web page to
another is sometimes called browsing or surfing the Web.
5
Influence on Society
◦The internet and the web changes the way the world
communicates, educates, entertains and conduct
business.
◦Exchange millions of electronic messages
◦Students turn to the Web to research topics for reports.
◦Access the internet for entertainment
◦Avoid crowds, parking problems and long lines.
6
Influence on Society
◦COMMUNICATION
◦EDUCAITON
◦ENTERTAINMENT AND NEWS
◦BUSINESS Electronic commerce
7
Influence on Society COMMUNCATION
Communication Options:
Electronic mail (e-mail)
Chat
Instant messaging
Virtual meetings
Collaborative workspaces
8
Ways to Access the Internet and the
Web
◦Telephone Line Access
◦DIAL-UP LINES
◦DIGITAL DEDICATED LINES
◦Integrated Services Digital Network (ISDN)
◦Digital subscriber line (DSL)
◦T-carrier line
◦Cable Television Access
◦Internet Service Providers
9
Web Browsers
10
Alternative Web Page Viewing
Devices
◦ You also can view Web pages using a smartphone or handheld
computer.
◦ A smartphone provides regular cell phone service plus offers other
features, such as a camera, calendar, and Internet access for email, music downloads, and access to Web pages.
◦ Handheld computers, are wireless, portable computers designed
to fit in a user’s hand.
◦ A personal digital assistant (PDA) is a popular type of handheld
computer used to manage personal information and access the
Internet.
11
Types of Web Sites
◦The types of Web sites that dominate the Web can be
categorized as personal, organizational/ topical, and
commercial. A Web site’s type differs from a Web site’s
purpose in that the purpose
12
Types of Web Sites
◦DESIGN TIP: Do not add personally identifiable
information that can be misused, such as a Social Security
number, to pages at a personal Web site.
13
SEARCH TOOLS
◦A search engine is a Web-based search tool that locates a
Web page using a word or phrase found in the page.
◦Popular search engine: Google, Windows Live Search, or
Ask.com.
◦A metasearch engine is a search engine, such as Mamma
or Dogpile, that performs a keyword search using multiple
search engines’ indexes.
14
Exploring Search Engines
1. Use Google, Ask.com, Windows Live Search, and
Mamma.
2. Perform a keyword search using each of the four search
tools using the same keyword or phrase of your choice.
3. Compare the search results returned by each search
engine.
15
Exploring Search Engines
1. Write a report that answers the following questions:
a) Are the Web pages listed in the search results lists the
same or different?
b) How do the search results from the Mamma metasearch
engine differ from the search results returned by the
other three search engines?
c) How can you use a similar exercise to identify
appropriate meta tag keywords and descriptive Web
page titles when planning a Web site?
16
Exploring a Search Directory
1. Use dmoz to view the Open Directory Project’s home
page.
2. Click the Computers link and then follow the subcategory
links to drill down through the hierarchy to locate pages
on basic Web design. Return to the home page and click
the suggest URL link at the top of the page. Review the
requirements for submitting Web page information to the
directory.
3. Write a report that explains how you would submit a new
site’s pages to the Open Directory Project.
17
Web Design Tools
As a Web designer, you should ask the following questions:
1. Does the new technology meet currently accepted standards for Web
development and design?
2. What specifically can the new technology do to further the purpose of my Web
site?
3. How will implementation of the new technology affect my Web site’s visual
appeal, accessibility, and usability?
4. What impact will adding this technology have on security and other Web site
elements?
5. What are the direct and indirect costs of implementing the new technology?
6. How soon will I see a return on investing in this new technology?
18
Web Design Tools
◦Various tools are available to create Web pages and add
dynamic content, animation, and interactivity.
◦The tools include markup languages, Cascading Style
Sheets (CSS), scripting languages, text editors, HTML
editors, WYSIWYG editors, and Web templates.
19
Advantages of Web Publishing
◦Printed information is convenient.
◦It also is a very comfortable, trusted method of
communication.
◦Despite these benefits, Web publishing offers distinct
advantages over print.
◦Currency, interactivity, reduced production costs, and
rapid, economical delivery.
20
The Interactivity Advantage
◦Other communication tools are: blogs and web-based
forms.
◦DESIGN TIP: After your Web site is published, plan to
review the site’s content for credibility, accuracy, and
timeliness on a regular basis and update the content as
necessary. Build into your site appropriate ways to
promote interactivity, such as a contact page, Web-based
form, or blog
21
The Delivery Advantage
◦Delivering information over the Internet and the Web can
be significantly faster and less expensive than using print
media, thus the Web’s delivery advantage.
◦DESIGN TIP: Exploit the cost advantage of Web publishing
by downloading free or low-cost photos, animations, and
multimedia elements for your Web pages. Promote your
Web site as a venue for delivering information
traditionally delivered through print media to maximize
the Web’s delivery advantage.
22
Basic Web Design Principles Balance and Proximity
Figure 2-1 Web pages evoke different moods by positioning Web
page elements symmetrically or asymmetrically.
23
Basic Web Design Principles Balance and Proximity
Figure 2-6 Related Web page elements should be placed in
proximity to each other and be surrounded by white space.
24
Figure 2-3 “Contrast and Focus” on a Web page is used to
stimulate attention and establish the page’s focal point.
25
Figure 2-4 Consistent placement and repetition of elements and
application of a color scheme across all pages at a Web site
promotes unity and visual identity.
26
Writing for the Web - Accuracy and
Currency
◦When collecting content for your Web site, confirm its
accuracy using reliable sources.
◦Typographical and spelling errors can embarrass you and
diminish your Web site’s credibility.
◦Proofread your content, and then ask at least one other
person to review it before you add the text to a Web page.
◦To demonstrate the currency and freshness of your site’s
content, you can add the last updated date to your Web
pages.
27
Writing for the Web - Scannability
◦Most Web site visitors prefer to quickly scan Web pages
for useful information, not read long passages of onscreen
text.
◦Web page text should be broken into small sections with
headings, subheadings, and bulleted lists that are written
to adequately but concisely cover the topic.
◦DESIGN TIP: Site visitors typically scan online text looking
for useful information instead of reading the text word for
word. Chunking text allows your site visitors to quickly
scan your Web pages and improves usability
28
Writing for the Web - Scannability
To ensure scannability, you should write your Web page
content with the following guidelines in mind:
◦Use chunked text, where applicable, to create short,
succinct paragraphs and bulleted lists that increase the
text’s scannability.
◦When necessary to write longer paragraphs, begin each
paragraph with a topic sentence that summarizes the
general idea of the whole paragraph. A visitor who scans
only the first sentences of each paragraph will still get the
overall picture of your Web page’s purpose.
29
Writing for the Web - Scannability
◦Make certain colored text does not suggest a link.
◦Avoid underlining text for emphasis because links are
traditionally underlined.
◦Use uppercase characters carefully because they can
reduce scannability. Some visitors might also consider text
in uppercase characters to be the equivalent of shouting.
Scannability is also affected by the choice of navigational
elements, color scheme choices, and fonts.
30
Color as a Web Design Tool
◦Color can be a powerful design tool for creating attractive,
effective Web sites. To use color as a design tool
effectively, you must understand color basics: the color
wheel, how monitors display colors, and visitors’
expectations for color on the Web.
31
Web Publishing Issues - Technical
Issues
◦Bandwidth
◦BROWSER DIFFERENCES
◦MONITOR RESOLUTION
◦Legal and Privacy Issues
◦PRIVACY ISSUES
◦Accessibility and Usability Issues
32
Design Tips
◦ DESING TIP: Ensure that your Web page elements, such as photos,
illustrations, animations, video, and sound fi les, are free of copyright
infringement. Create your own elements, obtain written permission
to use elements created by others, or purchase elements from
vendors
◦ DESIGN TIP: Design your Web site to be accessible by people with
various types of special needs, such as lost or impaired vision or color
blindness, by following the WAI and Section 508 guidelines for Web
accessibility.
33
The Web Site Development Planning
Process
Figure 3-1 Creating a successful Web site begins with developing a
detailed design plan.
34
Step 1: Define the Site’s Purpose
◦Define the site’s goals and objectives and then formulate a
written purpose statement for the site.
◦Goals are the results you want your Web site to
accomplish within a specific time frame.
◦Objectives are those methods you will choose to
accomplish the site’s goals.
◦A formal, written purpose statement summarizes your
site’s goals and objectives.
35
Web Site Purpose Statement
Figure 3-2 A purpose statement explains a site’s overall goals and the specific
objectives designed to achieve those goals.
36
Step 2: Identify the Site’s Target
Audience
◦Anyone around the world who has Internet and Web
access potentially can visit your Web site, you must
identify the specific group of visitors to which your site is
targeted, called the site’s target audience, to provide the
most value for that audience.
37
Target Audience Profile
Figure 3-3 A target audience profile identifies potential Web site visitors by
defining who they are and why they are likely to visit your site.
38
Target Audience Wants, Needs, and
Expectations
Figure 3-4 A successful Web site provides content to satisfy its target
audience’s wants and needs and meet its target audience’s
expectations for an attractive and usable site.
39
Step 3: Determine the Site’s General
Content
◦Your Web site’s general content likely will include multiple
Web pages presenting a combination of text, images,
audio, video, animations, and multimedia elements.
40
Exploring Home Page Content
1. Visit Art Institute, NAPA, and Uvault and review three
Web site home pages.
2. Review each home page and determine how well each
page’s content answers the Who? What? and Where?
questions site visitors have when visiting these sites.
41
Exploring Types of Underlying Pages
1. Locate and visit at least three commercial Web sites.
Include one each B2C and B2B sites and C2C site.
2. Review the types of underlying pages offered at each
site.
42
Step 4: Select the Site’s Structure
◦Should support the site’s purpose and make it easy for
visitors to find what they want at the site in as few clicks
as possible.
◦Planning the site’s structure before you begin creating its
pages has several benefits, such as the ability to do the
following:
Visualize the organization of the site’s pages and linking
relationships.
Organize the pages by level of detail.
43
Step 4: Select the Site’s Structure
Follow the links between pages to make certain visitors
can quickly click through the site to find useful information
— fewer clicks mean happier site visitors.
Detect dead-end pages, pages that currently do not fit
into the linking arrangement.
Rearrange pages and revise linking relationships, and
then visualize the changes before you create the site.
44
Step 4: Select the Site’s Structure
◦Some designers use a text outline to plan a site’s structure,
whereas others follow the storyboard process to create a
visual representation of the site’s structure.
◦A simple Web site storyboard can be created by arranging
sticky notes or index cards — each note or card
representing a Web page — on a wall or corkboard to
visualize a site’s proposed structure.
45
Step 4: Select the Site’s Structure
◦Another useful way to outline a site’s structure is to draw
an arrangement of shapes and lines called a flowchart.
◦Each shape indicates a page and each line indicates a link
from page to page.
◦As a Web designer, you should choose the method that
you find most flexible to outline your site’s structure.
◦Your site’s structure will likely follow one of three
structural themes: linear/tutorial, random, or hierarchical.
46
Step 5: Design the Look and Feel of
the Site - Visual Consistency
◦To avoid confusing visitors, all the pages at a site must share
a visual consistency that reassures visitors as they
◦move from page to page.
◦You can create visual consistency by repeating design
features — typeface, content position, color scheme — and
actual content — name, logo, major links — across all pages
at a site.
47
CSS AND PAGE LAYOUT
48
CSS AND PAGE LAYOUT
49
Exploring the Use of Color: Visual Consistency and
Visual Contrast
1. Review the home page and at least three underlying pages at the
following Web sites to determine how successfully each site uses
color:
a) a. Hotels.com
b) b. The Topps Company
c) c. 1-800-PetMeds
d) d. USATODAY.com
2. Write down your findings.
50
Step 6: Specify the Site’s Navigation
System
◦Easy for visitors to understand and follow will draw them
deeper into your site to view detail pages with content
that can satisfy their needs and expectations.
◦Consists of different types of links: text links; image links;
related link groups presented as menus, bars, or tabs;
breadcrumb trails; and site maps.
◦Today’s professional looking sites often use a combination
of these link types as part of a navigation system.
51
Step 6: Specify the Site’s Navigation
System
◦Another popular navigation element, search capability, is
often included for large sites with many pages.
◦No matter what combination of link types you use for your
site’s navigation system, the links should be both user
based and user controlled.
52
Web Page Typography Issues
◦Composing your text is just the first step.
◦You can make your text more effective by following the
rules of good typography.
◦Typography refers to the appearance and arrangement of
characters, commonly referred to as type, used to create
printed and on-screen material.
◦The characteristics that define type are typeface, style,
and size.
◦Selecting the appropriate type for your Web pages’ text is
part of the design process.
Web Page Images
When you select images, be sure you select high-quality,
relevant images that achieve the following:
Add value to your Web site
Match or complement your Web site’s color scheme
Accurately represent the content to which they link, if
used for image mapping
Contribute to the overall mood you want to set and
support the site’s message
54
Web Page Images
◦Be creative in the use of images on your Web pages.
◦Remember to follow best practices for images and Web
usability and accessibility: include redundant text links for
image map links, add an alternative text description for each
image, and avoid background images that obscure text.
◦You can acquire images for your Web site by creating your
own image files.
◦If you are creating your own images, you will use some
combination of these four tools: a digital camera, a scanner,
screen capture software, and illustration software.
GOOD LUCK!!!
Please let me know if you have any questions: sotirischaralambouss@Hotmail.com