Labels

INTERACTIVE DESIGN: LECTURES

29/03/2022 - 09/07/2022 (Week 01 - Week 15)
ALICIA TENG YI LING / 0345159/ BDCM
INTERACTIVE DESIGN
Lectures


LECTURES

Note: Essentially to make everything neater and for my own reference, in this page, I place all my lecture notes which are a messy interpretation of each lesson but it makes sense to me so I’m sorry if it doesn’t for you. 

Week 01 (29/03/2022)

For our first class, Mr. Shamsul started off by explaining the MIB for Interactive Design.  
Microsoft visual code. He said to update your e-portfolio frequently with your entire process and final products and you can get full marks. 

HTML: Hypertext Markup Language

CSS: Cascading Style Sheet
  • Gives style to the basic content that HTML creates
  • Can change colour, give layouts (columns)
Bootstrap: is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

First main page should be named: index.html

Create a minimum of five pages for my layout design. 

Netflix is the best-case study for a successful website

Week 1 Notes:
What is a website
  • A web document on the internet
  • One page or more
  • With intended purpose
Different types of websites:
  • Informational
  • Corporate
  • Portfolio
  • Brochure
  • Entertainment
Types of websites:
  • Personal
  • Educational
  • E-commerce 
  • Non-profit
Week 02 (05/04/2022)

Lecture 2 Notes - Web Design and New Media

Hardware & Software Issues
  • Growing variety of browsers that people can choose from, including:
    •  Microsoft Internet Explorer
    • Mozilla Firefox
    • Opera
    • Safari + others
  • People use a variety of operating systems, including Windows, Mac OS, and Linux
  • Computers can be set to a wide variety of screen resections, from 640 x 480 pixels to 1690 x 1050 pixels and beyond.
Web Standards
  • Central organization responsible for creating & maintaining web standards is the “World Wide Web Consortium (W3C)
  • It has defined dozens of standards, including the standard markup languages we use to build websites. The standard markup languages we will be using is:
    • HTML
    • CSS
Why Web Standards?
  • To make the internet a better place, for both developers and visitors, it is important that both browsers and web developers follow web standards
How the Web Works
  • When visiting a website, the web server hosting that site could be anywhere in the world
  • In order for you to find the location of the web server, your browser will first connect to a Domain Name System (DNS) server
    • When you connect to the web, you do so via an ISP. You type a domain name or web address into your browser to visit a site; e.g.: www.google.com, www.bbc.co.uk
    • Your computer contacts a network of servers called DNS servers. These act like a phone book; they tell your computer the IP address associated with the requested domain name. Every device on the web has a unique IP address, like a telephone number for that computer
Structure of a Web Page
  • Understanding structure
  • Learning about markup
  • Tags and elements

How Page use Structure
  • Standard format
  • In HTML, there are different levels of headings, (Title, subheadings, etc)
  • Structure helps readers to understand the stories in the newspaper
HTML describes the structure of pages
  • The HTML code is made up of characters that reside within the angled brackets <>
  • These are called HTML elements
  • Elements are usually made up of two tags: an opening tag and a closing tag
    • <element>Information</element>
  • <Li “”> is a html element
  • Unordered list (round bullet point), ordered list (numbers) – e.g., this bullet point is unordered
  • In CSS: Curly Braces {}
  • </p> (forward slash)
  • Code will have a problem without closing tags
Attributes tell us more about the Elements
  • Attributes provide additional info about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equal’s sign
    • <p lang= “eng us”>Paragraph in English</p>
    • Language is attribute name, English (US) is the attribute value
    • All values must be placed within two quotation marks “test”
    • All letters in HTML are all lowercase and American Spelling
    • One attribute can have more than one value (use a space – space bar – to separate those values)
    • Can also have more than one attribute in a HTML tag (Separate with space bar)
  • Body, Head & Title
  • <body>
    • You met the <body> element in the first example created. Everything inside this element is shown inside this element is shown inside the main browser window 
  • <head>
    • <link> within this section – maybe with your website icon for example
    • Before the <body> element you will often see a <head> element. This contains info about the page. You will usually find a <title> element inside the <head> element 
  • <title>
    • Appears in the tab of website
    • The contents of the <title> element is either shown in the top of the browser (tab bar)
  • <meta name=””.”/> or meta words - describes your website  
  • <ul></ul> - unordered list
  • <ol></ol> - ordered list
  • <li></li> - list
  • <p></p> - paragraph
  • <i></i> - Italics
  • <b></b> - Bold
  • <u></u> - Underline
  • <strike></strike> - Strikethrough
  • <a></a> - hyperlink 
    • Example: <a href=””> test text </a>
    • To make it open in a new tab: <a href=”” target=”_blank”> test text </a>
    • To give the link a title: <a href=”” target=”_blank” title=”pee pee”> test text </a>
      • Adding title complies to web standards
    • Alt (=Alternate words) is for keyword search in search engine
Introduction for page:
Hi, my name’s Alicia or you can call me by my online name, KingSaltBoi. I honestly don’t remember how it originated as it was from so long ago during the time, I first started playing games. Moving on, I’m here to show you a gallery of my life, essentially my work, things I like such as pottery, art, and plants and many more things. I hope you enjoy going through this website as much as I enjoyed creating it! Please do be gentle on me as this is my first time learning and trying to code
Example
 
 
<html> at top of doc
At bottom of doc </html>

Week 03 (12/04/2022)

Lecture 3 Notes - Adding Image in HTML
  • The tag <img> is used to add an image in HTML
  • Single sided element which does not have a closing tag like other HTML elements
  • The tag is considered empty until you add an attribute  
  • <img src=”url”>
  • Can link the file from computer or any stock image
    • pexels.com = free stock images
  • Place file in separate image folder not index folder but still within the one main singular folder
  • Alt attribute is added to describe the image (to give title)
  • Alternatively, you can also specify the width & height by adding those attributes (not recommended to add width and height unless file too big)
    • <img src=”img_flower.jpeg” alt=Flowers in Denmark” width=”500” height=”350”>
  • Example:
    • <img src=”images(folder name)/img_internet.jpg(image name and type)” alt=”internet images”> = should pop up automatically once typed in
Image Format for web
  • PNG has no bg normally
  • For a more responsive website, best to use PNG
ID and Class Attribute
  • ID attribute
    • Every HTML element can carry the ID attribute
    • Reason: it is use to uniquely identify the element from other elements on the page
    • It is important that no two elements have the same value for their ID attributes (otherwise the value is no longer unique)
    • ID can be used to link within a specific are within a website 
    • E.g., can be used to separate one specific title from others for a different font 
  • Class Attribute
    • Every HTML element can also carry a class attribute 
    • Sometimes you will want a way to identify several elements 
    • Col(column)-lg(large)-6(size?)
    • Basically, ID Attribute is individual way of classification while Class Attribute is for a group of elements
    • Example: <h1 id=“main”>This is my page</h1>
    • <h2 id=”visit”>dookie text</h2>
    • <body>
    • <ul>
    • <li><a href=”#main”>Main</a></li>
    • <li><a href=”#visit”>Places</a></li>
    • <li>Food</li>
    • </ul></body>
    • Just link the ID attribute using a href and hashtag 
    • </br> = space
  • Block Elements
    • Some elements will always appear to start on a new line in the browser window
    • It is known as block level elements
    • Examples: <h1>, <p>, <ul>, <li> and <img>(sometimes?)
  • Inline Elements
Week 04 (19/04/2022)

Lecture 4 Notes - UI vs UX

The difference?

UX: A button should physically press down when it is clicked.
UI: A series of buttons and how they look.

UX Designers
  • Focuses on structure and layout of the content, navigation and how users interact with them.
  • The types of deliverables they produce:
    •   Site-maps
    •   User flows
    •   Prototypes
    •   Wireframes
  • More focused on the underlying structure & purpose
  • Visual appearances does impact them, but is created as a separate layer that is applied on top. 
UI Designers
  • Focuses on the way functionality is presented and fine tune the details of how users interact with the interface
  • Produces visual comps and functioning front-end code
  • Refined final production quality outputs
User Interface Design
  • Focuses on anticipating what users need to do
  • Ensures that the interface's elements are easy to access, understand & use
  • Brings together concepts from interaction design, visual design, & information architecture.
Interface Elements
  • Input controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list boxes, toggles, date fields
  • Navigational Components: breadcrumb, slider, search field, pagination, tags, icons
  • Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
  • Containers: accordion
Common Characteristics
  • There are standards that identify effective design (regardless of media or discipline)
  • First step is to identify the user as the design needs to accommodate the intended user.
  • To make a connection with the user, the design interface has to achieve the mission of communication information through the printed word, dispensing a product, projecting and image or creating a space that’s easy to navigate
Golden Rules of Interface Design

Interface expert Nielsen identifies five usability attributes designers should put more attention to when creating a design interface:
  • Ease of Learning
  • Efficiency of Use
  • Memorability
  • Minimises Errors
  • Satisfies the User
  • Introducing CSS
Allows you to create rules that specify how the content of an element should appear.

CSS Style Rules with HTML Elements
  • CSS works by associating rules with HTML elements. 
  • These rules govern how the content of specified elements should be displayed. 
  • A CSS rule contains a selector & a declaration.
CSS Properties Affect how Elements are Displayed
  • CSS declaration sits inside curly brackets
  • They are made up of a property and a value, separated by a colon.
  • To specify several properties in one declaration, use a semi-colon. 
Method to Employ CSS
Using external CSS
<link>
  • Can be used in a HTML document to tell the browser where to find the CSS file used to style the page
  • Empty Element
  • Stays in the <head> elements
  • Should have these three attributes
    • href: specifies the path to the CSS file
    • type: specifies the type of document being liked to. Value should be text/css
    • rel: specifies the relationship between the HTML page and the file it is linked to. Value should be stylesheet when linking to a CSS file.
  • To use more than one CSS style sheet, use a <link> element for every CSS file. 
<style>
  • Include CSS rules within a HTML page by placing them inside a <style> element, usually sits inside the <head> element of a page
  • Should use the type attribute to indicate the styles are specified in the CSS
  • Value should be text/css
  • When building a site with multiple pages, you should use an external CSS style sheet to:
    • Allow all pages to use the same style rules
    • Keeps content separate from how the page looks
    •  Means you can change the styles used across all pages by altering just one file
Week 05 (26/04/2022)

CSS

Bold [font-weight]
  • To change any font weight
  • The font-weight property allows you to create bold text
  • There are two values that this property commonly takes:
    • normal-Text appear at a normal weight
    • bold-Text to appear bold
Italic [font-style]
  • If you want to create italic text, you can use the font-style property
  • There are three values this property can take:
    • normal-text to appear in a normal style
    • italic-text to appear italic
    • oblique-text to appear oblique
UPPERCASE & lowercase [text-transform]
  • The text-transform property is used to change the case of text giving it one of the following values:
    • uppercase-text appear to uppercase
    • lowercase-text appear to lowercase
    • capitalise-first letter of each word to appear capitalised
Underline & strike [text-decoration]
  • The text-decoration property allows you to specify the following values:
    • none – removes any decoration already applied to the text
    • underline – adds a line underneath the text
    • overline – adds line over the top of the text
    • line-through – adds a line through words (strikethrough)
Indenting Text [text-indent]
  • The text-indent property allows you to indent the first line of text within an element
  • The amount you want the line indented by can be specified in a number of ways but is usually given in pixels or em
  • It can take negative value (e.g.: -10px) 
Drop Shadow [text-shadow]
  • Can be quite complicated to due that fact that it may utilise 3 colours
  • The value of this property is quite complicated because it can take three lengths and a colour for the drop shadow
  • The first length indicates how far to the left or right the shadow falls
  • The second value indicates the distance to the top or bottom the shadow falls
  • The third value is optional and specifies the amount of blur that should be applied to the drop shadow
  • The fourth value is the colour of the drop shadow
 
Text alignment e.g.: <h1 style=”text-align: center”> TEST</h2>
HTML is a selector- refers to any HTML element
  • <style type=”text/css”>
HTML {
scroll-behaviour (Property): smooth (value);
{
h2, h3 {
text-align: center;
color:
}
  • This will align all h2 and h3  to the middle
CSS Boxes Model
  • At the beginning of this section on CSS, you saw how CSS treats each HTML element as if it lives in its own box
  • You can set several properties that effect the appearance of these boxes
  • We can control the dimensions of the boxes
  • Create border around the boxes
  • Show ad hide boxes
Box Dimensions-Width, Height
  • By default, a box is sized just big enough to hold its contents
  • To set your own dimensions for a box you can use the height and width properties
  • The most popular ways to specify the size of the box is to use pixels(px) or percentage (%)
  • Traditionally, pixel have been the most popular method because they allow designers to accurately control their size
  • If using pixels, width and height is fixed
  • When you use percentages, the size of the box is relative to the size of the browser window or, if the box is encased within another box, it is a percentage of the size of the containing box
 FIX** - min-height
  •  border* – must specify values = type, colour and thickness
  •  padding* – so text is not directly touched by border
  • If width is 400 px + padding of 20px, total becomes 440px (20px on each side) and height becomes 340px
  •  specific padding orientation
  •  will sit in the middle of the screen
*VALUE NAME CANNOT BE SEPERATED BY A SPACE MUST USE DASH (-) OR UNDERSCORE(_)*
  • border radius – square edges
  • border-radius – round edges
Limiting Width [min-width, max-width]
  • Some page designs expand and shrink to fit the size of the user’s screen
  • In such designs, the min-width property specifies the smallest size box can be displayed at when the browser window is narrow, and the max-width property indicates the maximum width a box can stretch to when the browser window is wide
These are very helpful properties to ensure that the contents of pages are legible
  • Limiting Height [min-height, max-height]
  • In the same way that you might want to limit the width of a box on a page, you may want to limit the width of a box on a page, you may also want to limit the height of it
  • This is achieved using the min-height and max-height properties
  • If the box is not big enough to hold the content, the content will expand outside the box and look very messy
  • To control what happens when there is not enough space for the content of the box, you can use the overflow property
Overflowing Content [overflow]
  • The overflow property tells the browser what to do is the content contained within a box is larger than the box itself
  • It can have one of the two values
    • hidden – hides any extra content that does not fit in the box
    • scroll – adds a scrollbar to the box so that users can scroll to see the missing content 
  • The overflow property is particularly handy because some browsers allow users to adjust the size to the text to appear as large or as small as they want
  • If the text is set too large than the page can become an unreadable mess
  • Hiding the overflow on such boxes helps prevent items overlapping on the page

Week 07 (09/05/2022)

The Display Property
  • Display is CSS’s most important property for controlling layout
  • Every element has a default display value depending on what type of element it is
  • The default for most elements is usually block or inline
  • A block element is often called a block-level element
  • An inline element is just referred to an inline element
  • will start a new line
  • basically, not on a new line element
  • Every element has a default display type
  • You can always override this. Though it would not make sense to make an inline div, you can use this to customise the display of elements that have specific semantics
  • A common example is making inline horizontal menus
    • <div> generates block level elements
    • <link href="style.css" type="text/css" rel="stylesheet">
  • Class attributes can be used for a group using same things 
  • ID attributes is for singular unique elements

Labels:

Comments

Post a Comment

Popular Posts