INTERACTIVE DESIGN//LECTURES & EXERCISES

August 23, 2021

INTERACTIVE DESIGN//LECTURES & EXERCISES

24.08.2021 -14.09.2021 (Week 1-Week 4)

Chaw Zhi Ting (0347344)
Bachelor of Design (Hons) Creative Media
Interactive Design // Lectures & Exercises

LECTURES :

WEEK 1// Briefing & Introduction

1. Webpage/ Web browsers/ Website

Webpage

-page with text, images, sound and video

-Single web page sites= Parallax sites (Multiple layers)/ Landing page(Static)

Web browsers

-A programme allow us to get anywhere on the internet, retrieving information from other websites. The information is transferred using Hypertext Transfer Protocol (http): method to package to transfer the information ( text, image,

Website

set of webpages are stored or hosted on web servers. Design for specific purpose (example: e-commerce, portfolio, and have domain names to

HTML (Hypertext Mark Up Language)

- provide structure and meaning to the content

CSS (Cascading Style Sheets)

-stylize the website with elements( layout, colours and fonts)

-Target various screen sizes, to make webpages responsive (branding)

JavaScript : Increase interactivity

- use to create dynamic and highly interactive websites (programme language

- handle complex fuctions and feautures

- programmatic code which enhances functionality

Figure 1.0 Different of HTML,CSS and Javascript, 24th Aug 2021

Figure 1.1 Example of website with and without CSS, 24th Aug 2021

Website (reception)

: navigation bar

: detailed description & tools (information)

Landing page (pushy salesman)

- Call-To-Action (CTA)

-Built to drive traffic for a specific marketing campaign

- no distraction

-no other options

-simply to inform & get user to take single action

Figure 1.2 Example of single webpage sites, 24th Aug 2021

Figure 1.3 Comparison between website and landing page, 24th Aug 2021

2. Static vs Dynamic Websites

Figure 1.3 Comparison between static and dynamic website, 24th Aug 2021

Figure 1.4 Differences of static and dynamic website, 24th Aug 2021

3. Domain & webhosting

Domain (internet address)

-a unique set of character to identify a specific website,

-Relation : Street address > House> Name to a person

-TLD domain Name Server (DNS)

Webhosting (landlord)

- our site's data : media, formatting, backups

- club servers

- leasing out server space to various renters, maintain the space

Figure 1.4 Uniform Resource Locator (URL), 24th Aug 2021

4. Frontend (Presenter), Backend (operator), Fullstack(fullstack)

-Frontend (client side): built to interact with users directly (CSS, HTML and JavaScript)

-Backend (server-side) : server-side web application logic and integration, code to help a database and application communicate

-Fullstack: both Frontend and Backend design and programming

Figure 1.5 Slides about full stack development, 24th Aug 2021

_________________________________________________________________________________

WEEK 2// Web Standards & HTML

Web Standards

Keeping the web free & accessible all
Helping make source code simpler, reducing development & maintenance time
Making web more accessible place
Allow backward compatibility & validation
Help maintain better SEO (Search Engine Optimization)
Creating a pool of common knowledge

Standards Development Organization or SDOs

Internet Engineering Task Force(IETF)
World Wide Wed Consortium (W3C)
WHATWG
ECMA TC39
Web Standards Project (WaSP）

HTML Scripting

Hypertext (or 'hyperlink' link between webpages）

+ Markup language (define the text document within tag which defines the structure of web pages)

*uses tags to define what manipulation has to be done on the text

HTML Element

1. Opening Tag <h1>

2. Content Hello, World!

3. Close Tag </h1>

What we see on a website (is content between tags)

1989 :Tim Berners-Lee : first proposed idea of 'web of information'

1990: Develop Hypertext Transfer Protocol (HTTP) : language computers use to communicate HTML docs over internet

Designed Universal Resource Identifier (URI) system : also known as URL

Figure 1.6 HTML Element, 3rd Sept 2021

HTML Page Structure

The basic structure of an HTML contains the essential building block elements (i.e., doctype declaration, HTML, head, title, and body elements) upon which all web pages are created.

<DOCTYPE! Html> : This is the document type declaration (not technically a tag). I t declares a docs as being an HTML docs. The doctype declaration is not case-sensitive

<html>: Base container

<head> : contains "behind the scenes" elements of webpage.

<body> : place to put actual content

<p> : what we can see on the page

Figure 1.6 HTML Page structure, 3rd Sept 2021

Figure 1.7 Heading elements, 3rd Sept 2021

_________________________________________________________________________________

WEEK 3// HTML

Mr Tarmizi started the lecture with a short introduction of himself and recap the lectures by Mr Mike last week. Then he reminded us of the HTML tips < "Don't forget to close the tag">

Proper page structure

Only one pair of <head></head> and <body></body> for every web page. All contents must reside within <body></body> section.

Folder structure

First web page must be rename as index.html

Recommended to have no space in filename.

Each supported files (images, css and javascript files) in its own folder.

Code structure

If image folder name is images, then the filename in HTML code must put folder name first, slash, then the actual filename.

<imgsrc="images/photo.jpg">

On link, if linking to other website, we need to type full path of the website starting from https:// or http://

Web image file format

1. JPEG//Joint Photographic Experts Group

• most commonly used, widely used in photography

• has a compression algorithm (reduces the size of an image, 1/10 of the original size.)

• In web design, JPEG is good for photographs but not good for graphics (lines, typography, drawings, etc) as it tends to granulate the edges.

• Unique: always have a white background

2. PNG// Portable Network Graphic

• based on the LSW compression algorithm which, unlike JPEG compression, works without losing the initial information.

• PNG file compresses image without losing the details of the original, which may not be displayed on the screen, but which can certainly be recovered by graphically editing the file.

• Unique: Supports transparent background layer, good for web design

3. GIF// Graphical Interchange Format

•Very low quality image format that store 8 bits per pixel for a total of 256 colorsper image compared to 16 million JPEGs that reach the limits of what the human eye can see.

• The GIF was born as a specific format for the web in the 80s. Therefore, taking into account the needs related to the band, it made his work perfectly given the minimum weight.

• Unique: Store multiple images in sequence by creating small animations that are often used in social networks.

Website layout

Multiple columns are created by using <div> or <table> elements. CSS (Cascading Style Sheets) are used to position elements/create backgrounds.<div> layouts and CSS can create flexible layouts that work on various screen sizes. Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience (navigation, easy to read with minimal resizing, panning and scrolling). * Tips: we can easily know the code form a website by clicking "view page source"

Figure 1.8 Example of div elements, 7th Sept 2021

_________________________________________________________________________________

WEEK 4// CSS

Cascading Style Sheets

Reusable stylesheet which makes website more flexible, allow to change design of many pages

Example: CSS Zen garden

Easier to maintain

-Cleaner HTML code

-Separates styles from HTML tags &page content

-Consistent look across entire website

-Easily maintained by changing styles in one place

Separate Content from Form

<p class=“header”>My First Header</p>

<p class=“info”>My Information 1 goes here</p>

<p class=“header”>My Second Header</p>

<p class=“info”>Different Information goes here</p>

Form or Style example:

.header { font-size:14px;}

.info { font-family: verdana;

font-color: blue;

font-size: 12px; }

Two Aspects// Declaration & Selector
adding style to a web page via CSS

1. CSS style “Declaration” (Specifying what the style looks like)

{

font-size: 10px;

background-color: #ffffff;

color: #222222;

margin: 20px;

}

2. CSS “Selector” (Naming the HTML element to which the style applies)

body {

font-size: 10px;

background-color: #ffffff;

color: #222222;

}

*same declaration is allow to apply to a group of selectors by listing all of the desired selector names separated by commas.

Example: h1, h2, h3, h4, h5, h6 {color:#ff0000; font-family:sans-serif}

Naming options//

for an HTML element: assigning “ID” names and “class names.”

A class declaration uses (.)

A id declaration uses (#)

Example:

<html>

<body>

<h1 class=”myboldandbluelook”> Introduction </h1>

</body>

<html>

.myboldandbluelook

{

font-weight: bold;

color: blue;

}

if want this style to be used only once in the web page, then specify it as an ID style with this slight syntax change:

#myboldandbluelook

{

font-weight: bold;

color: blue;

}

1. Simple Type Selector

Ex.: body{}, p{}

Selects every instance of the corresponding HTML element

These simple selectors are commonly used

2. Wildcard selector

* { }

Selects all elements on a page

Can be used in combination with other selectors

3. Descendant Selectors/ "Nested Selector"

Grouping selectors but without commas, it applies style to all the elements corresponding to the nested structure specified by the selector

Ex: ul li a strong{color:green;}

meaning that the above style would be applied to any <strong> HTML tag that lies within an <a> tag that lies within an <li> tag that lies within a <ul> tag

Styling Hyperlinks

a:link {color:#FF0000;} /* color to apply to link before it’s visited */

a:visited {color:#00FF00;}/* color to apply to link before it’s visited*/
a:hover {color:#FF00FF;}/* color to apply to link while mouse pointer is over it*/
a:active {color:#0000FF;}/* color to apply while left mouse button is held down on link */

Note list sequence:

a:link & a:visited > a:hover > a:active

Two good approaches for named (class or id) styles:

1. Internal stylesheet
Put the style declarations in the <head> of HTML text file

<head>

CSS Code Here

</style>

</head>

2. External stylesheet
Put the style declarations in a separate text file & import that text file into your HTML file

<head>

</head>

3. Inline style

Apply style attribute to a single tag

Ex: <p style=“font-size: 14px;”>Text</p>

INSTRUCTIONS:

EXERCISE: ANALYZING DIFFERENT TYPE OF WEBSITES

Business Websites (✓)

Blogs

E-commerce Websites (✓)

Portfolios (✓)

Event Websites (✓)

Online Forums

Personal Websites

Membership Websites

Non-profit Websites

Informational Websites (✓)

Figure 1.0 Week 1 task instructions, 24th Aug 2021

Figure 1.1 Week 1 Exercise PDF version, 30th Aug 2021

HTML Exercise

Figure 1.2 HTML in W3Schools, 3rd Sept 2021

Figure 1.3 HTML Among Us Exercise, 3rd Sept 2021

Week 3 <div>

Figure 1.4 Added <div>in Among Us HTML, 7th Sept 2021

Week 4 <CSS>

Figure 1.6 Adding CSS to HTML, 14th Sept 2021

Figure 1.6 "Among Us" after applying CSS, 14th Sept 2021

Search This Blog

CHAW ZHI TING • JANICE (0347344)