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 and from Ordering Disorder: Grid Principles for Web Design by Khoi Vinh, New Riders, 2011, ISBN

 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 across the network  Such communication is usually transparent to end-users PQ

 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 intermediate router PQ clientserver

 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

 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

 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

 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

 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

 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

 Create “blueprints” or “mockups” describing:  Layout: shows where everything goes  Graphic Design: take full advantage of grids... this technique is called wireframing from Ordering Disorder: Grid Principles for Web Design by Khoi Vinh, New Riders, 2011, ISBN Users Content Users Content Interface

 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

 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

it’s all in the tags!

 Some symbols have special meaning in XHTML  < (use < )  > (use > )  & (use & )  For a full list, go to:

 Validate your XHTML code  Go to:  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: Whoa, I see red.  Or: This paragraph is in purple font!

 Define your own colors via RGB components  Check out this color chart:

 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