1 / 51

Fundamentals of Web Design and Internet Development: Key Principles and Techniques

This course explores the fundamentals of web design and the development of the internet. It covers how design meets user expectations, the historical context of internet evolution, and the architecture of computer networks. Learn about usability, interface design, and the principles of creating effective websites in today's digital landscape. By the end of the course, students will understand how to build user-centered web applications using current technologies and best practices, as well as the business and technical constraints involved in web design.

leda
Download Presentation

Fundamentals of Web Design and Internet Development: Key Principles and Techniques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related