Week 2 Fundamentals & Web Design
description
Transcript of Week 2 Fundamentals & Web Design
![Page 1: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/1.jpg)
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
![Page 2: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/2.jpg)
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
![Page 4: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/4.jpg)
Compare IE to Google Chrome
Can you tell the difference?
![Page 5: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/5.jpg)
Menus in Google Chrome
![Page 6: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/6.jpg)
When you’re in a hurry
![Page 7: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/7.jpg)
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
![Page 8: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/8.jpg)
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?
![Page 9: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/9.jpg)
Where did it all begin?
ENIAC (1940s)
![Page 10: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/10.jpg)
Who’s cooler than those guys? Automation (1950s)
![Page 11: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/11.jpg)
Looks like Mary Tyler Moore IBM 360 (1964)
![Page 12: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/12.jpg)
The birth of the GUI
Text-only CRTs (1970s) to an early Mac (1984)
![Page 13: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/13.jpg)
Mac versus PC
Mac/PC revolution (1980s/1990s)
![Page 14: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/14.jpg)
The World Wide Web
Internet revolution (1990s/2000s)
Sir Tim Berners-Lee
![Page 15: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/15.jpg)
What’s happening now?
Handheld revolution (2000s/2010s)
![Page 16: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/16.jpg)
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
![Page 17: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/17.jpg)
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?
![Page 18: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/18.jpg)
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
![Page 19: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/19.jpg)
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
![Page 20: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/20.jpg)
Internet traffic (i)
Each layer on the client side logically communicates with the same layer on the server side
intermediate router
PQ clientserver
![Page 21: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/21.jpg)
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
![Page 22: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/22.jpg)
Browsing the Web
![Page 23: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/23.jpg)
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
![Page 24: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/24.jpg)
Client/server communication
![Page 25: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/25.jpg)
Hostnames and IP addresses
![Page 27: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/27.jpg)
Welcome to my domain
![Page 28: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/28.jpg)
Getting your message across Messages are divided into individual
packets
![Page 29: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/29.jpg)
From point A to point B
![Page 30: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/30.jpg)
Going wireless
![Page 31: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/31.jpg)
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?
![Page 32: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/32.jpg)
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
![Page 33: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/33.jpg)
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
![Page 34: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/34.jpg)
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
![Page 35: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/35.jpg)
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
![Page 36: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/36.jpg)
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
![Page 37: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/37.jpg)
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
![Page 38: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/38.jpg)
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
![Page 39: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/39.jpg)
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
![Page 40: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/40.jpg)
XHTML
it’s all in the tags!
![Page 41: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/41.jpg)
XHTML tags
![Page 42: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/42.jpg)
Special characters
![Page 43: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/43.jpg)
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
![Page 44: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/44.jpg)
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
![Page 45: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/45.jpg)
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>
![Page 46: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/46.jpg)
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
![Page 47: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/47.jpg)
What are you looking at?
Each bit can also be thought of as a pixel Each pixel contains 24 bits to represent
colors
![Page 48: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/48.jpg)
Colors
![Page 49: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/49.jpg)
Virtual buttons
![Page 50: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/50.jpg)
Following the mouse pointer
![Page 51: Week 2 Fundamentals & Web Design](https://reader035.fdocuments.in/reader035/viewer/2022062501/56816857550346895dde7cbb/html5/thumbnails/51.jpg)
Where exactly is the button?
We need to know the size (dimensions) of the button, too