Transcript Fundamentals and Web Design (PPTX)

The College of Saint Rose
CIS 521 / MBA 541 – Introduction to Internet Development
David Goldschmidt, Ph.D.
selected material from Fluency with Information Technology, 4th edition
by Lawrence Snyder, Addison-Wesley, 2010, ISBN 0-13-609182-2
and from Ordering Disorder: Grid Principles for Web Design
by Khoi Vinh, New Riders, 2011, ISBN 0-321-70353-7

Engineers create hardware
and software to match
what we already know
▪ (whether we know it or not)

How?
 Using metaphors
 Using common repeating interfaces
Can you tell the difference?

Alt-Tab
 Switch from one open application to another

Ctrl-Tab or Command-Tab
 Switch from one tab to another within an app

F5
 Refresh current display (also Ctrl-R)
 In PowerPoint, start the slide show

Designers also forge new ground
 (and hope their new ideas catch on!)
 How do you scroll up,
down, left, right on
the “touch” devices?

ENIAC (1940s)

Automation (1950s)

IBM 360 (1964)

Text-only CRTs (1970s) to an early Mac (1984)

Mac/PC revolution (1980s/1990s)

Internet revolution (1990s/2000s)
 Sir Tim Berners-Lee

Handheld revolution (2000s/2010s)

Hierarchical networks:
 Nodes are not equal
 Nodes interconnect in
a strict pattern
 Single points of failure exist!

Heterarchical networks:
 Nodes are often equal
 Nodes connected to produce multiple paths

The Internet (1969) is a network that’s
 Global
 Decentralized
 Redundant
 Made up of many different types of machines

What do we use the Internet for?
 How many machines make up the Internet?

A computer network is an interconnected
collection of autonomous computers and
devices
 Software communicates
P
across the network
 Such communication is
usually transparent to
end-users
Q

Seven-layer
protocol stack
 In reality,
not all layers
are used

The Internet
uses only
four layers:
 Application
 Transport
 Network
 Physical

Each layer on the client side logically
communicates with the same layer on the
server side
Q
server
client
intermediate router
P

Each layer prepends or appends its
information in a header or trailer
HTTP Request
TCP Hdr | HTTP Request
IP Hdr | TCP Hdr | HTTP Request
Ethernet Hdr | IP Hdr | TCP Hdr | HTTP Request | Cksum
P

Synchronously
 Sender and receiver are active
at the same time
 Sending and receiving occur
(almost) simultaneously

Asynchronously
 Sending and receiving occur
at different times

Messages are divided into individual packets

The World Wide Web (or just Web) is:
 Global
 Decentralized
 Redundant (sometimes)
 Made up of Web pages
and interactive Web services

How many Web pages are on the Web?

Three key building blocks of the Web:
 Uniform Resource Locator (URL)
 HyperText Transfer Protocol (HTTP)
 HyperText Transfer Markup
Language (HTML)

The original intent of the Web
was to provide a networked
medium to share information
from Ordering Disorder: Grid Principles for Web Design by Khoi Vinh, New Riders, 2011, ISBN 0-321-70353-7

Collect and document requirements
 What needs to be built?
 Who are the intended audience(s)?
 What is the context (what do users already know)?
 When will the site be used?
 How will the site be used?
 Why is the site necessary?
 What constraints exist?
from Ordering Disorder: Grid Principles for Web Design by Khoi Vinh, New Riders, 2011, ISBN 0-321-70353-7





The “delivery” of the design solution
Target screen resolution
Browser versions to be supported
Content management for clients?
Windows vs. Unix backend system
from Ordering Disorder: Grid Principles for Web Design by Khoi Vinh, New Riders, 2011, ISBN 0-321-70353-7

Purpose of design solution?
 Increase visitor traffic, time spent on site
 Increase direct sales/revenue on site
 Increase “click-throughs” to advertisements
 Increase conversions of site visitors to customers
 Branding, positioning, marketing


Usability testing
Maintenance of site
from Ordering Disorder: Grid Principles for Web Design by Khoi Vinh, New Riders, 2011, ISBN 0-321-70353-7

Content and editorial constraints
 What types of content will there be?
 Format(s) of pre-existing content?
 Organizational structure of content?
 Sitemap
 Images, videos, etc.?
 Who will provide new/updated content?
 Style guides
from Ordering Disorder: Grid Principles for Web Design by Khoi Vinh, New Riders, 2011, ISBN 0-321-70353-7

Create “blueprints” or “mockups” describing:
 Layout: shows where everything goes
Users
Interface
Content
 Graphic Design: take full
advantage of grids...
from Ordering Disorder: Grid Principles for Web Design by Khoi Vinh, New Riders, 2011, ISBN 0-321-70353-7

Grids:
 Add order, continuity, and harmony to the
presentation of information
 Allow an audience to predict where to find
information
 Make it easier to add new content in a manner
consistent with the overall vision
 Facilitate collaboration on the design without
compromising the overall vision
from Ordering Disorder: Grid Principles for Web Design by Khoi Vinh, New Riders, 2011, ISBN 0-321-70353-7

Challenges designers face:
 Design is critically dependent on the technology




available to the user for its successful rendering
Fonts are fundamentally unstable online, varying
from one user to another
No agreed upon size for a “standard” Web browser
User preferences may alter the requirements
(e.g. font sizes, window size, color schemes, etc.)
Design requires interactive components

Some symbols have special
meaning in XHTML
 < (use &lt;)
 > (use &gt;)
 & (use &amp;)

For a full list, go to:
http://www.w3.org/TR/REC-html40/sgml/entities.html

Validate your XHTML code
 Go to: http://validator.w3.org
 Shows you a list
of errors if you
made any mistakes

Add “style” to almost any XHTML tag
 Set colors, fonts, margins, borders, etc.

For example, apply colors:
 Try: <h2 style="background-color: red;">
Whoa, I see red.
</h2>
 Or: <p style="color: purple;">
This paragraph is in purple font!
</p>

Define your own colors via RGB components
 Check out this color chart:
http://www.html.net/tutorials/html/lesson7_216websafecolourchart.asp

Each bit can also be thought of as a pixel
 Each pixel contains 24 bits to represent colors
 We need to know the
size (dimensions) of
the button, too