Week 2 Fundamentals & Web Design

1. The College of Saint Rose CIS 521 / MBA 541 – Introduction to Internet Development David Goldschmidt, Ph.D. Week 2Fundamentals & Web Design 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. 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

3. Internet Explorer (IE) version 8

4. Compare IE to Google Chrome Can you tell the difference?

5. Menus in Google Chrome

6. When you’re in a hurry

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

8. 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?

9. Where did it all begin? • ENIAC (1940s)

10. Who’s cooler than those guys? • Automation (1950s)

11. Looks like Mary Tyler Moore • IBM 360 (1964)

12. The birth of the GUI • Text-only CRTs (1970s) to an early Mac (1984)

13. Mac versus PC • Mac/PC revolution (1980s/1990s)

14. The World Wide Web • Internet revolution (1990s/2000s) • Sir Tim Berners-Lee

15. What’s happening now? • Handheld revolution (2000s/2010s)

16. Networks • Hierarchical networks: • Nodes are not equal • Nodes interconnect ina strict pattern • Single points of failure exist! • Heterarchical networks: • Nodes are often equal • Nodes connected to produce multiple paths

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

18. Q P Computer networks • A computer network is an interconnected collection of autonomous computers and devices • Software communicatesacross the network • Such communication isusually transparent toend-users

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

20. Q P Internet traffic (i) • Each layer on the client side logically communicates with the same layer on the server side server client intermediate router

21. P Internet traffic (ii) • 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

22. Browsing the Web

23. How do we communicate? • Synchronously • Sender and receiver are activeat the same time • Sending and receiving occur(almost) simultaneously • Asynchronously • Sending and receiving occurat different times

24. Client/server communication

25. Hostnames and IP addresses

26. Finding a domain

27. Welcome to my domain

28. Getting your message across • Messages are divided into individual packets

29. From point A to point B

30. Going wireless

31. Weaving the Web • The World Wide Web (or just Web) is: • Global • Decentralized • Redundant (sometimes) • Made up of Web pagesand interactive Web services • How many Web pages are on the Web?

32. Building blocks of the Web • Three key building blocks of the Web: • Uniform Resource Locator (URL) • HyperText Transfer Protocol (HTTP) • HyperText Transfer MarkupLanguage (HTML) • The original intent of the Webwas to provide a networkedmedium to share information

33. from Ordering Disorder: Grid Principles for Web Design by Khoi Vinh, New Riders, 2011, ISBN 0-321-70353-7 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?

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

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

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

37. 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... Users Content this technique iscalled wireframing Interface

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

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

40. XHTML it’s all in the tags!

41. XHTML tags

42. Special characters

43. More special characters • Some symbols have specialmeaning in XHTML • < (use &lt;) • > (use &gt;) • & (use &amp;) • For a full list, go to: http://www.w3.org/TR/REC-html40/sgml/entities.html

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

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

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

47. What are you looking at? • Each bit can also be thought of as a pixel • Each pixel contains 24 bits to represent colors

48. Colors

49. Virtual buttons

50. Following the mouse pointer