(Finals) Create a website using HTML

LESSON 1

WHY STUDY HCI?

People now expect easy to use systems
-​ generally they are not tolerant of poorly designed systems
-​ if a product is hard to use, they will seek other products

Human Computer Interaction

-​ a discipline concerned with the study, design construction and implementation of
human-centric interactive computer systems
-​ design, evaluation and implementation of user interfaces for software or hardware
systems.

HCI Definitions
●​ Human-Computer Interaction is the study, design, evaluation, and implementation of
interactive computing systems for human use, and the study of the major phenomena
surrounding these interactions.
●​ Human-Computer Interaction is about the design, evaluation, and implementation of user
interfaces for software or hardware systems. It involves understanding user needs,
cognitive and physical abilities, and designing systems to accommodate those factors.
●​ Human-Computer Interaction is the study of how people interact with computers and
other technologies, and how this interaction can be improved by designing better
interfaces, tools, and environments.

HCI Disciplines
●​ Computer Science
●​ Cognitive Psychology - Understanding human behavior and mental process
●​ Neuroscience - Neurosciences enables us to build more accurate and robust models of
human cognitive functions. These models may allow us to evaluate usability and predict
user behavior. Has potential to close the gap between humans and computers.
●​ Ergonomics - User-Equipment Design-Environment
●​ Engineering - Faster machines, faster systems, building better interfaces.
●​ Design
●​ Anthropology - User body shape
●​ Sociology - Groupware. Considers introduction of IT in society
●​ Philosophy - Philosophy of technology. Create consistency.
●​ Linguistics
●​ AI - simulating human behavior

1940s - 1950s Early Computing and Batch Processing

●​ Early computers like ENIAC lacked direct user interaction. User programmed computers
using punch cards and batch processing systems
1960s Advent of Interactive Systems
●​ Development of time-sharing systems
●​ Douglas Engelhart introduced the concept of augmenting human intellect culminating in
the creation of mouse and graphical interfaces
●​ Ivan Sutherland’s Sketchpad(1963) introduced interactive graphics

1970s Personal Computing

●​ During the 1970s, the focus shifted towards making computers accessible to individuals.
Xerox PARC’s development of the Alto introduced the WIMP(windows, icons, menus and
pointer) model, which became the basis of GUIs. Early Programming environments such
as Smalltalk further enhanced interactivity, signaling the beginning of user-centered
computing.

Mass Adoption of GUIs(1980s)

●​ The 1980s saw the commercialization of GUIs, thanks to systems like Apple’s Macintosh
and Microsoft’s Windows. These interfaces made computing accessible to non-technical
users, emphasizing usability and design simplicity. This era also saw the rise of
user-centered design(UCD), where user needs became central to system development.

Internet and Multimedia(1990s)

●​ With the advent of the World Wide Web, HCI entered a new phase. Web Browsers like
Netscape introduced hyperlink-based navigation, transforming how users interact with
information. Multimedia applications grew in popularity, requiring innovative interface
designs to manage complex content and media.

Ubiquitous Computing(2000s - Present)

●​ The 21st century brought about pervasive computing. Devices like smartphones and
tablets popularized touch-based interfaces, starting with the iPhone in 2007. Immersive
technologies such as virtual reality(VR) and augmented reality(AR) emerged, alongside
AI-driven systems like virtual assistants(e.g.Siri, Alexa). Today, HCI focuses on inclusive
design, natural user interfaces(NUIs) and enhancing user experience(UX).

History and Evolution of Interfaces

Command Line Interfaces(CLI)

●​ Early systems used command-line interfaces that required users to memorize
commands. While efficient for experts, they were not intuitive for general users.

●​ A command line interface(CLI) is a software mechanism you use to interact with your
operating system using your keyboard. Another mechanism is a graphical user
interface, which is popular today with all applications and software systems. You can use
a gui to visually navigate and click on icons and images to make things work. However, a
gui is inefficient for system administration tasks, especially if the environment is virtual or
 remote. With a command line interface, you can enter text commands to configure,
navigate, or run program on any server or computer system. All operating systems
including Linux,, MacOS and Windows provide a CLI for faster system interaction.

Graphical User Interfaces(GUI)

●​ GUIs introduced visual metaphors, such as desktops and folders, to make systems more
user-friendly. The WIMP model became the standard for interaction, significantly
broadening computer accessibility.

●​ A graphical user interface, or GUI, is a form of user interface that allows users to interact
with electronic devices through graphical icons and visual indicators such as secondary
notation. In many applications, GUIs are used instead of text-based UIs, which are
based on typed command labels or text navigation. GUIs were introduced in reaction to
the perceived steep learning curve of command line interfaces.

Web interfaces
●​ The rise of internet necessitated the development of web interfaces. Browsers
incorporated responsive designs to adapt to various devices,, from desktops to
smartphones ensuring usability across platforms.

Touch Interfaces
●​ Touchscreens revolutionized interaction, allowing users to interact directly with on-screen
elements. Gestures like swiping and pinching become intuitive ways to navigate
systems.
​
Natural and Immersive Interfaces
●​ Emerging interfaces, such as voice and conversational systems, use AI to enable natural
language interactions. Immersive technologies like VR and AR create engaging
environments, while motion tracking and gesture controls redefine interactivity.

The role of HCI in software development

●​ User Centered Design(UCD)

○​ HCI Emphasizes designing with the user in mind. Techniques like personas, task
analysis, and usability testing ensure that software meets user needs. UCD
prioritizes empathy, focusing on solving user problems effectively.

●​ Improving Usability
○​ Usability is a core goal of HCI. Well-designed systems are:
○​ Easy to learn and use
○​ Efficient, reducing time and effort
○​ Inclusive, accommodating users with disabilities
 ●​ Enhancing User Experience(UX)
○​ HCI goes beyond usability by aiming for positive user experiences. UX design
incorporates;
○​ Wireframes and prototypes to test ideas
○​ Iterative development to refine solutions
○​ Emotional Design to create engaging products

●​ Driving Innovation
○​ HCI fosters new interaction paradigms, such as gesture-based controls and
IoT-enabled systems. By integrating emerging technologies like AI and robotics,
HCI drives innovation across industries.

●​ Economic Impact
○​ Good HCI design reduces training costs, increases productivity and enhances
customer satisfaction. It’s a critical factor in product adoption and market
success.

●​ HCI Methods and Techniques

○​ User Research
■​ Interviews and Surveys: Gather qualitative and quantitative data about
user needs and preferences.
■​ Contextual Inquiry: Observe users in their natural environment to
understand workflows and challenges
■​ Personas: Create detailed user profiles representing typical users to
guide design decisions.

Design Techniques
●​ Wireframing and Prototyping - Develop visual representations of the interface to test
design concepts
●​ Storyboarding - use visual narratives to depicts user interactions with the system
●​ Participatory Design - Involve users in the design process to ensure solutions meet
their expectations.

Evaluations methods
●​ Usability Testing - conduct tests to evaluate the ease of use and functionality of a
system
●​ Heuristic Evaluation - assess designs against established usability principles
●​ A/B Testing - compare two versions of a design to determine which performs best

Interaction Techniques
●​ Gesture-Based Interaction - enable intuitive controls using touch and motions
●​ Voice Interfaces - allows users to interacts through natural language commands
●​ Augmented and Virtual Reality - create immersive experiences that extend traditional
interaction paradigms
LESSON 2

Introduction to HTML and Basic Webpages

●​ Key Concepts in HTML(HyperText Markup Language) is the foundation of web
development.
●​ It defines the structure of a webpage using tags and elements.
●​ Essential tags:
○​ <html>: Root element of the page
○​ <head>: Contains metadata and links to external resources. Contains metadata
about the document, such as the title character encoding, etc.
○​ <body>: Contains the visible content of the webpage
○​ <h1> to <h6>: Headings of different sizes
○​ <p>: Paragraphs
○​ <ul> and <ol>: unordered and ordered list.
○​ <li>: List items.

EVOLUTION OF WEB MEDIA

Early web media relied on flash and silverlight, which had security and accessibility issues.

Problems with Flash and Silverlight:

●​ Security Issues: Flash and Silverlight had numerous security vulnerabilities, making
them common targets for cyberattacks, malware and exploits
●​ Performance and Efficiency: These technologies were resource-intensive, consuming
high CPU and memory usage, which negatively impacted device performance
●​ Accessibility Challenges: Flash-based content often lacked proper accessibility
support, making it difficult for users with disability to access media.
●​ Mobile Compatibility: With the rise of smartphones and tablets, Flash became less
viable since Apple refused to support Flash on iOS due to performance and security
concerns.

THE SHIFT OF HTML5 AND MODERN WEB MEDIA

With the introduction of HTML5, web developers gained built-in support for multimedia elements
without requiring third-party plugins. The <video> and <audio> elements became the standard
for embedding media.

HTML5 Multimedia Features

●​ Native Support: Modern web browsers(Chrome, Firefox, Edge, Safari, etc.) support
<video> and <audio> elements without additional plugins.
●​ Multiple Formats: Developers can use different file formats like MP4(H.264), WebM and
Ogg to ensure compatibility across browsers.
●​ Customizable Controls: The built-in media controls provide play, pause, volume, and
fullscreen options, but developers can also create custom interfaces using CSS and
JavaScript.
 ●​ JavaScript APIs: APIs like the Media API and WebRTC API allow for advanced media
manipulation, real-time streaming and interactivity.

Key Features of video tag

●​ Controls: allows user to play pause and adjust volume
●​ Src: Defines the location of the video
●​ Fallback Content: ensures accessibility for unsupported browsers

<video controls>
<source src=”hello.mp4” type=”video/mp4”>
<source src=”hello.webm” type=”video/webm”>
<p>Your browser doesn’t support this video. <ahref=”hello.mp4”>Download Here</a></p>
</video>

JavaScript APIs for Advanced Media Handling

●​ HTML5 introduced JavaScript APIs to give developers more control over multimedia
content.
●​ Media API(for Custom Video Controls) - Allows developers to manipulate media
playback dynamically.

The Future of Web Media

●​ WebAssembly (WASM): Enhances performance by running near-native speed
applications in the browser.
●​ AV1 Codec: A more efficient, high-quality video format being adopted by major
platforms.
●​ AI and Machine Learning: Used for automated subtitles, object recognition in videos, and
improved streaming quality.
●​ Augmented & Virtual Reality (WebXR API): Expanding media experiences beyond
traditional video and audio.

Common Video Codecs & Containers

●​ WebM (VP8/VP9 + Opus/Vorbis) – Supported in most modern browsers.
●​ MP4 (H.264 + AAC) – Widely supported but has patent restrictions.
●​ Ogg (Theora + Vorbis) – Older format, mostly replaced by WebM.

Other <video> Features

●​ width & height: Adjust video size while maintaining aspect ratio.
●​ autoplay: Starts playback automatically (not recommended).
●​ loop: Repeats the video.muted: Starts muted.
●​ poster: Displays an image before playback.
●​ preload: Buffers video in advance (auto, metadata, none).
Using the <audio> Element
●​ Works similarly to <video> but without width, height or poster attributes.

Example:
<audio controls>
<source src="viper.mp3" type="audio/mp3">
<source src="viper.ogg" type="audio/ogg">
<p>Your browser doesn’t support this audio.
<a href="viper.mp3">Download here</a></p>
</audio>

Common Audio Formats

●​ MP3 - Popular and widely supported
●​ Ogg Vorbis - Open-source but less common
●​ FLAC - High-quality lossless audio

Why Multiple Formats Matter

●​ Patent restrictions and browser differences mean developers need multiple formats for
the best compatibility.
●​ Mobile browsers may have different codec support than desktops.

Text Tracks for Accessibility

●​ Captions, subtitles, and transcripts improve accessibility.
●​ Useful for:
○​ Deaf or hard-of-hearing users.
○​ Non-native speakers needing translations.
○​ Noisy or quiet environments