Post on 25-Feb-2016
description
Week 2Fundamentals & Web Design
The College of Saint RoseCIS 521 / MBA 541 – Introduction to Internet DevelopmentDavid 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
Designing what you already know Engineers create hardware
and software to match what we already know▪ (whether we know it or not)
How? Using metaphors Using common repeating interfaces
Compare IE to Google Chrome
Can you tell the difference?
Menus in Google Chrome
When you’re in a hurry
More keyboard shortcuts
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
What about innovation?
Designers also forge new ground (and hope their new ideas catch on!)
How do you scroll up,down, left, right onthe “touch” devices?
Where did it all begin?
ENIAC (1940s)
Who’s cooler than those guys? Automation (1950s)
Looks like Mary Tyler Moore IBM 360 (1964)
The birth of the GUI
Text-only CRTs (1970s) to an early Mac (1984)
Mac versus PC
Mac/PC revolution (1980s/1990s)
The World Wide Web
Internet revolution (1990s/2000s)
Sir Tim Berners-Lee
What’s happening now?
Handheld revolution (2000s/2010s)
Networks
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
Are you connected?
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?
Computer networks
A computer network is an interconnected collection of autonomous computers and devices Software communicates
across the network Such communication is
usually transparent toend-users
P
Q
Open Systems Interconnection (OSI) Reference Model
Seven-layerprotocol stack In reality,
not all layersare used
The Internet uses only four layers: Application Transport Network Physical
Internet traffic (i)
Each layer on the client side logically communicates with the same layer on the server side
intermediate router
PQ clientserver
Internet traffic (ii)
Each layer prepends or appends its information in a header or trailer
P
Ethernet Hdr | IP Hdr | TCP Hdr | HTTP Request | Cksum
IP Hdr | TCP Hdr | HTTP Request
TCP Hdr | HTTP Request
HTTP Request
Browsing the Web
How do we communicate? Synchronously
Sender and receiver are activeat the same time
Sending and receiving occur(almost) simultaneously
Asynchronously Sending and receiving occur
at different times
Client/server communication
Hostnames and IP addresses
Welcome to my domain
Getting your message across Messages are divided into individual
packets
From point A to point B
Going wireless
Weaving the Web
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?
Building blocks of 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 Webwas to provide a networkedmedium to share information
Start with the requirements 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
Technical constraints
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
Business constraints
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 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
Wireframing
Create “blueprints” or “mockups” describing: Layout: shows where everything goes
Graphic Design: take fulladvantage of grids...
this technique iscalled wireframing
from Ordering Disorder: Grid Principles for Web Design by Khoi Vinh, New Riders, 2011, ISBN 0-321-70353-7
Users
Content
Interface
Grids and graphic design
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
Web design is highly variable 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
from Ordering Disorder: Grid Principles for Web Design by Khoi Vinh, New Riders, 2011, ISBN 0-321-70353-7
XHTML
it’s all in the tags!
XHTML tags
Special characters
More special characters
Some symbols have specialmeaning in XHTML < (use <) > (use >) & (use &)
For a full list, go to:http://www.w3.org/TR/REC-html40/sgml/entities.html
Get it right (with a little help)
Validate your XHTML code Go to: http://validator.w3.org
Shows you a listof errors if youmade any mistakes
Adding a bit of style
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>
Using a bit of color
Define your own colors via RGB components Check out this color chart:
http://www.html.net/tutorials/html/lesson7_216websafecolourchart.asp
What are you looking at?
Each bit can also be thought of as a pixel Each pixel contains 24 bits to represent
colors
Colors
Virtual buttons
Following the mouse pointer
Where exactly is the button?
We need to know the size (dimensions) of the button, too