Interactive Design | Project 1: Proposal
14 May
2025
- 28 May 2025
(Week 4-6)
Justin
Cleon
(0375523)
Interactive Design | Project 1: Proposal
Table
of
Contects
1. Instructions
2. Lectures
Lecture 4 (Week 4) : Web Standards
In the early days of the Web, users interacted with the Web using a keyboard, mouse, and monitor. Nowadays, people access the web in a far greater variety of ways, such as on phones or other mobile devices, touchscreen interfaces on tablets, audible interfaces (interacting by speaking to the computer, listening to it, or both), and speech output (people who are unable to use their hands depend on speech input to navigate).
Hardware & Software Issue
There is a growing variety of browsers available to users, including Microsoft Edge (formerly Internet Explorer), Mozilla Firefox, Google Chrome, Opera, Safari, etc). People utilize a range of operating systems, such as Windows, Mac OS, and Linux. Additionally, people use devices with a wide range of screen resolutions, from 640x480 pixels to high-definition displays exceeding 1680x1050 pixels.
The websites can look different depending on how people access them. However, the most important thing is that people can reach the content. The only way to ensure that websites work across all devices is to follow web standards. Web standards are the core set of rules for developing websites that help make sure the site works properly for all users. Lastly, it might be possible to develop sites that do not comply with these standards to cause problems and prevent some people from using the sites.
The main organization responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C). The W3C has defined dozens of standards, including the standard markup languages used to build websites. The standard markup languages will be used in this course are HTML and CSS.
Why Web Standards?
• To make the internet a better place for both developers and visitors. When developers follow the web standards, the development is simplified to understand another's coding
• To ensure that all browsers will display your website properly, without time-consuming rewrites
How the Web Works?
When you visit a website, the web server hosting that side could be anywhere in the world. In order to find the location of the web server, the browser will first connect to a Domain Name System (DNS) server.
Structure of a Web Page?
• Understanding structure
• Learning about markup
• Tags and elements
Structure is essential in helping readers to understand the messages we intend to deliver and navigate around the document.
HTML Describes the Structure of Pages
The HTML code is made up of characters that live inside angled brackets <> (an opening tag and a closing tag. These are called HTML elements.
<element>Information</elements
<p> opening tag
</p> closing tag
Heading
HTML has six (6) levels of headings:
• <h1> main headings
• <h2> subheadings and so on
Paragraph
• <p> paragraph
• <b> bold
• <i> italic
• <br> a single tag to create a single line break
• <hr> a single tag to create a horizontal line
Basic HTML
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>My First Webpage</h1>
<p>This is a paragraph...</p>
</body>
</html>
Ordered List
A numbered list where the order of items is significant.
• <ol> ordered list
• <li> list item
<ol>
<li>Apple</li>
<li>Mango</li>
<li>Grapes</li>
<li>Orange</li>
</ol>
Unordered List
A bulleted list.
• <ul> unordered list
• <li> list item
<ul>
<li>Sugar</li>
<li>Salt</li>
<li>Pepper</li>
</ul>
Sub/Nested List
A list placed within another list. This structure is often used to represent categories and subcategories.
• <ul> list within list
Link
<a herf="https://www.google.com">Google</a>
<a> create hyperlinks
Image
Display an image on a webpage.
<img src="image/photo.png" alt="alternative text" title="title of the image"/>
Lecture 5 (Week 5) : HTML & CSS
ID & Class Attribute
ID Attribute
• Every HTML element can manage the ID attribute
• Uniquely identify the element from other elements on the page
• There is important that no two (2) elements have the same value for their ID attribute
Class Attribute
• Every HTML element can support the class attribute
• Sometimes if want a way to identify several elements as being different from the other elements on the page
• The class attribute on any elements can share the same value or name
Block Elements
• Some elements will always appear to start on a new line in the browser window
• <h1>, <p>, <ul>, and <li> as block level elements
Inline Elements
• Some elements will always appear to continue on the same line as a nearby component
• <b>, <i>, <em>, <a>, and <img> as inline elements
Introduction to CSS
Cascading Style Sheet (CSS)
CSS enable to create rules that specify how the content of an element should appear.
CSS Style Rules with HTML Elements
CSS works by applying rules with HTML elements. These rules govern how the content of specified elements should be displayed.
A CSS rule contains two (2) parts:
• A selector
• A declaration
Figure 2.1 Selector & Declaration
• A property
• A value
Specify several properties in one declarations each separated by a semi-colon (;).
Figure 2.2 Property & Value
CSS Color
• Set background color on text
• Set color on text
• Set border color
CSS Background
• Set background color
• Set background image
• Set background repeat
• Set background attachment
• Background shorthand
CSS Text Formatting
• Text color
• Text alignment
• Text decoration
• Text transformation
• Text spacing (text-indent, letter-spacing, word-spacing)
• Text shadow
CSS Font
List are the best web safe font for HTML and CSS:
• Arial (sans-serif)
• Verdana (sans-serif)
• Tahoma (sans-serif)
• Trebuchet MS (sans-serif)
• Times New Roman (serif)
• Georgia (serif)
• Garamond (serif)
• Courier New (monospace)
• Brush Script MT (cursive)
Lecture 6 (Week 6) : CSS Selectors
CSS Selectors
• A fundamental part of CSS to target and style HTML elements on web page
• Define which elements should receive specific styles (colors, font, spacing, and more)
• A crucial part of web development because it enables controlling the presentation and layout of web pages
There are several types of selectors:
• Universal Selector (*)
Select all elements on the page. It's represented by an asterisk (*).
• Element Selector (p)
The simplest type of selector, targets HTML element by tag name.
• ID Selector (#)
Target an element with a specific id attribute, using a hashtag (#) symbol followed by the ID name.
• Class Selector (.)
Target elements with a specific class attribute, using a dot (.) symbol followed by the class name.
• Descendant Selector
Selects an element that is a descendant of another element and specifies a hierarchy of elements to target. For example, to style all <a> elements inside a <div> with class "container."
• Child Selector (ul>li)
Selects element that are direct children of another element. To select only the immediate <li> children of an <ul>.
• Pseudo-class Selector (:)
Selects elements based on state or position in relation to other elements. Common pseudo-classes include :hover, :active, :visited, :link, :focus, :nth-child(n).
• Pseudo-element Selector (::)
Selects parts of an element rather than then element itself. Common pseudo-element include ::before and ::after, which are used to add content before or after an element.
Why are there so many selectors?
• CSS provides a variety of selectors to offer flexibility and granularity when targeting HTML elements for styling
• Enable web developers ability to precisely target and style specific elements or groups off elements based on structure, attributes, state, or position within the document. It is important to consider specificity, structure, attribute-based selection, pseudo-classes and pseudo-element, responsive design, stateful interactions, cross-browser compatibility, ease of maintenance, accessibility
Lecture 7 (Week 7) : Box Model
Display Property
Display is CSS's most important property for controlling layout. Every element has a default display value, usually block or inline.
Block-Level Element
<div> is the standard block-level element. A block-level element starts on a new line and stretches as far as it can.
Inline Element
<span> is the standard inline element. An inline element can wrap some text inside a paragraph without disrupting the flow of that paragraph.
Other Display Properties:
• Inline-block
• Flex
• Grid
Box Model
Most HTML elements are containers, such as body, p, h1, h2, div, ul, ol, li. Each of these is a container or box with three (3) layers that surround its content:
• Padding
• Border
• Margin
The size of each of the layers in the box model can be set using CSS units of measure (em, %, and px). For example, consider the following <p>, which is wrapped inside a <div>:
<div>
<p>This is a paragraph. It is a very short paragraph.</p>
</div>
We can apply the following CSS to control the size of the padding, border, and margin of the paragraph:
div {
background-color: red;
padding: 0;
border: 1px solid black;
margin: 0;
}
p {
background-color: white;
padding: 1em;
border-width: 10px;
border-style: solid;
border-color: blue;
margin: 10px;
}
A reason to include an element in <div> is to create layout. Another method to create layout in CSS is using position property.
Flexbox (Flexible Box Layout)
CSS Flexbox is a powerful tool for creating responsive and efficient web layouts. It relies on understanding the Box Model to manipulate elements' positioning and spacing within a container.
Flex Container
The parent element with display: flex.
display: flex
Establishes a flex container.
flex-direction
Sets the direction of the flex items (row, column).
justify-content
Aligns flex items along the main axis (start, end, center, space-between, space-around).
align-items
Aligns flex items along the cross axis (stretch, center, start,
end).
Flex Items
The children of the flex container.
3. Project 1: Proposal
Document 3.1 The Chitato Website (PDF)
4. Feedback
No feedbacks are given for this task.
5. Reflection
With the completion of this first project, I am confident that the burden on the upcoming tasks we will undertake will be lessened as we already have a clear picture of them, allowing us to focus more on the technical aspects later.
Comments
Post a Comment