1. 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

2.  Engineers create hardware and software to match what we already know ▪ (whether we know it or not)  How?  Using metaphors  Using common repeating interfaces

4. Can you tell the difference?

7.  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

8.  Designers also forge new ground  (and hope their new ideas catch on!)  How do you scroll up, down, left, right on the “touch” devices?

9.  ENIAC (1940s)

10.  Automation (1950s)

11.  IBM 360 (1964)

12.  Text-only CRTs (1970s) to an early Mac (1984)

13.  Mac/PC revolution (1980s/1990s)

14.  Internet revolution (1990s/2000s)  Sir Tim Berners-Lee

15.  Handheld revolution (2000s/2010s)

16.  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

17.  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?

18.  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

19.  Seven-layer protocol stack  In reality, not all layers are used  The Internet uses only four layers:  Application  Transport  Network  Physical

20.  Each layer on the client side logically communicates with the same layer on the server side intermediate router PQ clientserver

21.  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

23.  Synchronously  Sender and receiver are active at the same time  Sending and receiving occur (almost) simultaneously  Asynchronously  Sending and receiving occur at different times

28.  Messages are divided into individual packets

31.  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?

32.  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

33.  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

34.  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

35.  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

36.  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

37.  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 0-321-70353-7 Users Content Users Content Interface

38.  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

39.  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

40. it’s all in the tags!

43.  Some symbols have special meaning in XHTML  < (use < )  > (use > )  & (use & )  For a full list, go to: http://www.w3.org/TR/REC-html40/sgml/entities.html

44.  Validate your XHTML code  Go to: http://validator.w3.orghttp://validator.w3.org  Shows you a list of errors if you made any mistakes

45.  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!

46.  Define your own colors via RGB components  Check out this color chart: http://www.html.net/tutorials/html/lesson7_216websafecolourchart.asp

47.  Each bit can also be thought of as a pixel  Each pixel contains 24 bits to represent colors

51.  We need to know the size (dimensions) of the button, too