Web-Based Interface Design Overview
30 Questions
0 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

What is the course code for "Web-Based Interface Design"?

CSF3133

What is the name of the course instructor for "Web-Based Interface Design"?

Wan Nural Jawahir Hj Wan Yussof

What is the instructor's email address?

What is the name of the course offered?

<p>Web-Based Interface Design</p> Signup and view all the answers

What is the venue for the course?

<p>BK4SMS</p> Signup and view all the answers

What is the day and time of the course?

<p>Every Monday, 3-5 PM</p> Signup and view all the answers

What is the expertise of the instructor?

<p>Computer Vision and Image Processing</p> Signup and view all the answers

What are the two main technologies used in web site development?

<p>Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS)</p> Signup and view all the answers

Which of the following is NOT a component of the course assessment?

<p>Midterm Exam</p> Signup and view all the answers

What is the main topic covered in Topic 1 of the course?

<p>Practical Test</p> Signup and view all the answers

Which of the following is a topic covered in Topic 2 of the course?

<p>Website Organization</p> Signup and view all the answers

Which of these is NOT part of the assessment for CLO3/PLO10?

<p>Final Exam</p> Signup and view all the answers

What is the weight of the Quiz in the overall course assessment?

<p>5%</p> Signup and view all the answers

What is the weight of the Project Report for CLO2/PLO3 in the overall assessment?

<p>15%</p> Signup and view all the answers

What is the weight of the Final Exam for both CLO1/PLO1 and CLO2/PLO3 in the overall assessment?

<p>20%</p> Signup and view all the answers

What is the topic covered in Topic 4 of the course?

<p>Introduction to HTML 5</p> Signup and view all the answers

What is the topic covered in Topic 5 (Part 1) of the course?

<p>Cascading Style Sheets (CSS)</p> Signup and view all the answers

Which of the following topics is NOT included in Topic 6 of the course, 'JavaScript'?

<p>Visual Design Principles</p> Signup and view all the answers

The course assessment includes a midterm exam.

<p>False</p> Signup and view all the answers

The objective of "Today's Activity" is to analyze a website and discuss its key aspects of design.

<p>True</p> Signup and view all the answers

Students are required to work individually in groups.

<p>False</p> Signup and view all the answers

Which of the following is NOT one of the criteria for website evaluation in "Today's Activity"?

<p>Website Functionality</p> Signup and view all the answers

How long should the group presentations be?

<p>5 minutes</p> Signup and view all the answers

Which type of website is NOT suggested as an example for group analysis?

<p>Gaming websites</p> Signup and view all the answers

What is the course's primary focus, as indicated by its title?

<p>Web-Based Interface Design</p> Signup and view all the answers

What are some key topics covered in Topic 5 (Part 2), "Cascading Style Sheets (CSS)"?

<p>Elements Dimention, Box Model and Text Flow, Drop-Down Menus, Text Shadows, Rounded Corners, Colour, Box Shadows, and Multiple Background Images.</p> Signup and view all the answers

What aspect of web design does 'Today's Activity' focus on?

<p>Analyzing a website to understand key aspects of web design</p> Signup and view all the answers

What are some of the criteria used for website evaluation in "Today's Activity"?

<p>Aesthetics, Navigation, Responsiveness, and Content.</p> Signup and view all the answers

What are some of the types of websites suggested for group analysis?

<p>E-commerce sites, News sites, Social media platforms, Educational institution websites, Entertainment/Streaming sites, Travel and Hospitality sites, Government or Public Services sites, Non-Profit or Charity sites, Technology/Software Company sites, Sports/Entertainment News Sites.</p> Signup and view all the answers

What is the main purpose of the course, as explained in the synopsis?

<p>To provide students with the knowledge of integrating a basic concept of Human Computer Interaction (HCI) with Web Design, and practically expose them to HTML and CSS.</p> Signup and view all the answers

Study Notes

Course Information

  • Course code: CSF3133
  • Course title: Web-Based Interface Design
  • Day and time: Every Monday, 3-5 PM
  • Venue: BK4SMS
  • Instructor: Assoc. Prof. Ts. Dr. Wan Nural Jawahir Hj Wan Yussof
  • Instructor contact: [email protected]
  • Instructor qualifications: PhD (UMT), MSc, B.IT (KUSTEM)
  • Instructor expertise: Computer Vision and Image Processing

Course Agenda

  • Course Synopsis
  • Course Content & Schedule
  • Course Learning Outcomes
  • Course Assessment
  • Course Contents

Course Synopsis

  • The course integrates Human Computer Interaction (HCI) with Web Design
  • It covers two core technologies for building websites: HTML and CSS
  • Students will develop simple web sites applying user-centered design principles
  • The course focuses on web interface design and web programming fundamentals

Course Learning Outcomes

  • Describe basic concepts of human-computer interaction and web interface design (CLO1/PLO1)
  • Analyze web design principles and methods applicable to websites (CLO2/PLO3)
  • Build HTML and CSS-based websites, incorporating scripting languages and interface design based on project requirements (CLO3/PLO10)

Course Assessment

  • CLO1/PLO1: Knowledge & Understanding
    • Quiz (5%)
    • Test (10%)
  • CLO2/PLO3: Cognitive
    • Project Report (15%)
    • Final Exam (20%)
  • CLO3/PLO10: Digital Skill
    • Practical Report (15%)
    • Practical Test (10%)

Topic 1: Introduction to Internet and World Wide Web

  • Internet and the Web
  • Web Standards and Achievements
  • Information over the Web
  • Network Overview
  • Client/Server Model
  • Internet Protocol
  • Uniform Resource Identifiers & Domain Names
  • Markup Language

Topic 2: Web Design

  • Design for Target Audiences
  • Website Organization
  • Visual Design Principles
  • Design for Accessibility
  • Writing for the Web
  • Color Usage
  • Graphics and Multimedia Uses
  • Features of Other Designs to Consider
  • Navigation Design
  • Page Layout Design
  • Design for Mobile Web

Topic 2 (Part 2): Web Design

  • Navigation Design
  • Page Layout Design
  • Design for Mobile Web
  • Web Design Best Practices

Topic 3: HTML

  • Document Type Definition
  • Website Templates
  • HTML Elements (Heading, Title, Meta & Body, Paragraph, Line Break, BlackQuote, Phrase, Ordered List, Unordered List, List of Descriptions, Special Characters, Structure Elements, Anchor Elements)

Topic 4: HTML 5

  • Introduction to HTML 5
  • HTML 5 Structure Elements
  • HTML 5 New Elements
  • HTML 5 Form Input

Topic 5: Cascading Style Sheet (CSS) (Part 1)

  • Inline Styles
  • Embedded Style Sheets
  • Conflicting Styles
  • Linking External Style Sheets
  • Positioning Elements

Topic 5: Cascading Style Sheet (CSS) (Part 2)

  • Elements Dimension
  • Box Model and Text Flow
  • Drop-Down Menus
  • Text Shadows
  • Rounded Corners
  • Color
  • Box Shadows
  • Multiple Background Images

Topic 6: Javascript

  • Introduction
  • Data Types, Literal and Variables
  • Dialogue Box
  • Operators
  • Conditional Statements and Looping
  • Functions
  • JavaScript Objects

Topic 7: Web Development

  • Large-Scale Project Development
  • Web Development Process
  • The Whole Overview of Domain Name
  • Web Hosting
  • Choosing a Virtual Host
  • Page Layout Design
  • Web Mobile Design
  • The Best Practices of Web Development

Topic 8: Human Computer Interaction

  • Human
  • Input and Output Channel
  • Human Memory
  • Thinking: Reasoning and Problem Solving
  • Emotions
  • The Difference between Human Personality
  • Psychology and Interactive System Design
  • Interaction Models
  • Human Computer Interaction Framework
  • Ergonomic

Today's Activity

  • Objective: Analyze a website to understand key aspects of web design
  • Group Formation (5 mins): Divided into 5-6 member groups
  • Each group assigned a website for evaluation
  • Website Evaluation Guidelines (5 mins) Criteria: Aesthetics, Navigation, Responsiveness, Content
  • Group Discussion (15 mins)
  • Presentation (30 mins): Each group to present findings (5 mins)

Websites for Evaluation

  • E-commerce sites (Amazon, Shopee)
  • News sites (BBC, The Guardian)
  • Social media platforms (Facebook, Instagram)
  • Educational institutions' websites
  • Entertainment/Streaming sites (Netflix, YouTube, Disney+)
  • Travel and Hospitality sites (Airbnb, Booking.com, TripAdvisor)
  • Government or Public Services sites (Gov.uk, IRS.gov, Malaysian Government Portal)
  • Non-profit or Charity sites (WWF, Red Cross, UNICEF)
  • Technology/Software Company sites (Apple, Microsoft, Google)
  • Sports/Entertainment News sites (ESPN, Bleacher Report, TMZ)

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Quiz Team

Related Documents

CSF3133 Web-Based Interface Design Course Outline PDF

Description

This quiz covers the fundamental concepts of Human-Computer Interaction (HCI) and web design principles. Students will explore the integration of HTML and CSS in creating user-centered websites while emphasizing web interface design techniques.

More Like This

Use Quizgecko on...
Browser
Open
Browser
Browser