Lesson 1

Networks and hardware are typically considered the final two layers of the Web Interaction Model, especially in models that descend from the OSI model or hierarchical web interaction frameworks.
📐 Web Interaction Model – Simplified Layer View
From top to bottom:

1. User Interface Layer
   • Browsers, apps, screen readers: The User Interface Layer is the topmost layer where users directly interact with web content through browsers, mobile apps, or assistive technologies like screen readers. This layer encompasses the visual and interactive elements displayed on screens, such as buttons, forms, text, and multimedia, tailored to provide an intuitive experience. Browsers like Chrome or Firefox interpret and present web data, while apps may use web views or native components to deliver content. Accessibility tools ensure inclusivity by translating visual elements into audio or tactile feedback, making this layer critical for user engagement and experience.
2. Application Layer
   • HTML, JavaScript, HTTP(S), APIs: The Application Layer handles the core functionality of web interactions, processing user requests and delivering dynamic content. It relies on technologies like HTML for structure, JavaScript for interactivity, and HTTP(S) for secure communication between clients and servers. APIs play a key role, enabling seamless data exchange between web applications and external services, such as fetching weather data or processing payments. This layer ensures that user inputs trigger appropriate server-side logic, delivering responsive and interactive web experiences tailored to user actions.
3. Presentation/Rendering Layer:
   • CSS, DOM tree, layout engines: The Presentation/Rendering Layer is responsible for transforming raw data into visually coherent web pages. CSS defines styles like colors, fonts, and layouts, while the DOM tree organizes HTML elements into a structured hierarchy that browsers can manipulate. Layout engines, such as WebKit or Blink, calculate the precise positioning of elements to render the final page on screen. This layer ensures that content is displayed consistently across devices, balancing aesthetic appeal with performance for smooth and visually appealing user experiences.
4. Transport Layer
   • TCP, UDP (e.g., TLS over TCP for HTTPS): The Transport Layer manages reliable data transfer between devices over the internet, primarily using protocols like TCP and UDP. TCP ensures accurate, ordered delivery of data packets, critical for HTTPS traffic secured by TLS, which encrypts sensitive information like passwords or credit card details. UDP, being faster but less reliable, supports real-time applications like video streaming. This layer establishes connections, handles data segmentation, and ensures efficient communication, forming the backbone of secure and stable web interactions.
5. Network Layer
   • IP addressing, routing, DNS lookups: The Network Layer facilitates the routing of data across the internet using IP addressing and protocols. IP assigns unique addresses to devices, enabling accurate data delivery, while routing ensures packets travel efficiently through interconnected networks. DNS lookups translate human-readable domain names (e.g., google.com) into IP addresses, connecting users to servers. This layer handles the logistics of data movement, ensuring global connectivity and accessibility of web resources across diverse network environments.
6. Hardware Layer
   • Physical network: routers, switches, cables, devices (laptops, mobile phones): The Hardware Layer forms the physical foundation of web interactions, encompassing devices like laptops, smartphones, routers, switches, and cabling. Routers direct data traffic, switches connect devices within networks, and cables or wireless systems transmit signals. End-user devices process and display web content, relying on processors, memory, and network interfaces. This layer’s reliability and performance directly impact the speed and quality of web access, grounding the entire web interaction model in tangible infrastructure.

In most Web Interaction Models:

• Networks (e.g., IP, routing, DNS) handle communication
• Hardware (e.g., devices, infrastructure) supports the physical transmission

They form the foundation that higher layers depend on for user interaction, content rendering, and application logic.

This course describes the final two layers of the Web Interaction Model, which are

1. networks and
2. hardware,

as they apply to a website design project.
In this course, which is the third of a three-part series that teaches you the requirements for planning a Web site

1. Web Site Planning Models
2. Planning a Web Site Design
3. Planning a Web Site Deployment

the standards and tools for Web design teams will be discussed.
The second course, Planning a Web Site Design, examined the first three layers of the Web Interaction Model,

1. signs and metaphors,
2. information architecture, and
3. software.

After completing the course, you will be able to:

1. Describe the Web Interaction Model and the Web
2. Development Process Model
3. Describe a network architecture
4. Plan for a client's network requirements
5. Describe and plan for a client's hardware requirements
6. Describe how a Web design team interfaces with a client to deploy the site
7. Apply industry standards to evaluating a Web site

In this course, design strategies and tools will be discussed using the following components:

1. Diagrams,
2. Series of Images, and
3. Exercise and online Quizzes.

Quizzes and exercises allow you to apply what you have learned to solve more complex problems.
The prerequisites for the course will be discussed in the next lesson.