Interactive Design Project 1: Lectures & Exercises

March 30, 2022

Interactive Design Project 1: Lectures & Exercises

28/03/2022 - 03/07/2022 (Week 1- Week 16)
Evaleez Voo Lian Yun / 0350275
Interactive Design / Bachelor of Design (Hons) in Creative Media
Lectures & Exercises

Lectures

Week 1: Introduction

What is a Website?

Web document in the internet
1 page or more
With intended purpose

Types of Websites

Informational website
Corporate website
Portfolio website
Brochure website
Entertainment website
Personal website
Educational website
E-commerce website
Nonprofit website

Written Notes:

Week 2: Web Design and New Media

Web Standards

1. Hardware and software issues

Growing variety of browsers - Mozilla, Firefoz, Google Chrome, Opera, Safari, etc.
Different screen resolutions.
High probabilty that your website will look different.
Solution: Develop websites in accordance to web standards.

How the Web Works

When you connect to the web, you do so via an ISP. Type the domain name/ web address into your browser to visit the site.
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
The unique number that the DNS server returns to your computer allows your browser to contact the web server that hosts the website you requested. A web server is a computer that constantly connected to the web, and is set up especially to send web pages to user.
The web server then sends the page you requested back to your web browser.

Structure of a Webpage

Structure is very important in helping readers to understand the messages we are trying to convey & navigate around the document.

How Pages Use Structure

The uses of headings and subheadings reflect a hierarchy of information

Any document will start with a large heading, followed by an introduction or the most important information.

When using a word processor to create a document, we separate out the text to give it structure.

Each topi might have a new paragraph & each section can have a heading to describe what it covers.

To describe the structure of a web page, we add code to the words we want to appear on the page.

HTML

Made up of characters that live inside angled brackets <>.
Two tags: Opening and Closing

<element>information</element>

Attributes provide additional information about the contents of an element.

Appear on the opening tag of an element
Two parts: name & value
<p lang="eng-us">Paragraph in English</p>
lang = attribute name
eng-us = attribute value

Body:

<body>
Everything inside the element is shown inside the main browser window.

Head:

<head>
Before <body>
Contain information about the page
<title> inside

Title:

<title>
shown in tab bar

Headings:

<h1>

Main headings

<h2>

subheadings

<h3>,...

Further sections

Paragraph:

<p></p>

Bold

<b></b>
Characters appear bold

Italic

<i></i>
Characters appear italic

List

Ordered list

<ol></ol> then <li></li> for each item in the list.
Numerical order

Unordered list

<ul></ul>then<li></li>
Point form

Nested list

Add another <ul></ul> into the <ul></ul> you have

Links

<a></a>
Specify which page to link with the href attribute

<a href=:http:///blablabla.com"> Blablabla</a>

Week 3: Extra Markup

Adding Image in HTML

<img>
No closing tag
Tag is empty until you add an attribute
<img src="url"

src specify the location of the image
<img src="img_flower.jpeg">
<img src="http://stockimages.anylink.com">

Alt attribute can be added to describe the image

<img src="img_flowers.jpeg" alt="Flowers">

Width & Height

<img src="img_flowers.jpeg" alt="Flowers" width="500" height="500">

Image formats for Web

JPEG

Most common
Highly compatible, small size, little loss of quality
Saved using lossy compresssion

Lossless compression
Save image over and over again without losing any data
8-but lossless format

Supports a maximum of 256 colours.
Can be animated

Good choice for logo
Small but not suitable for photos

Bitmap of indexed colours and uses lossless compression
Full range of colour
Most used
Support transparent image

ID Attribute

Every html can carry the ID attribute
Identify the element from other elements
No two elements should have the same value for their ID attributes
Giving them an ID allows you to style it differently from any other elements in the page

Class Attribute

To identify several elements as being different from other elements of the page
Class attribute on any elements can share the same value or name

Block Elements

Appear at the start of a new line
<h1>, <p>, <ul>, <li>

Inline Elements

Appear to continue on the same line as their neighbouring elements
<b>, <i>, <em>, <a> and <img>.

Week 4: UI vs UX

UX Designer

Focus on structure and layout of the content, navigation and how users interact with them.
Site maps, user flows, protoypes and wireframes
Visual appearance can be created as a separate layer that is applied over the top

UI Design

Anticipant what users might need to do
Makes sure interface has elements that are easy to access, understand and use.
Interface design

Input controls:

Buttons, text fields, checkboxes, etc

Navigational Components:

Breadcrumb, slider, search field, etc.

Informational Components:

Tooltips, icons, progress bar, etc

Containers:

Accordion

Golden Rules of Interface Design

Ease of learning
Efficiency of Use
Memorability
Minimize errors
Satisfy the User

Week 5: Introduction to CSS

CSS allows you to create rules that specify how the content of an element should appear
For example:

Set the background of the page is cream
All paragraphs should appear in grey using the Arial typeface
Level header should be in a blue, italic, Helvetica typeface

CSS works by associating rules with HTML elements.
A CSS rule contains two parts: a selector and a declaration:

Fig x.x CSS Rule (20/04/22)

CSS Properties effect how elements are displayed:

Fig x.x CSS Propoerties (20/04/22)

Method to Employ CSS

Using external CSS

<link>

The <link> element can be used in HTML document to tell the browser where to find the CSS file used to style the page.
It is an empty element and it lives inside the <head> element.
It should use three attributes:

href; to specify the path to the CSS file
type; This attribute specifies the type of document being linked to. The valie should be text/vss
rel; Specifies the relationship between the HTML page and the file linked to. The value should be stylesheet when linking to a CSS file.

A HTML page can use more than one CSS style sheer.
To do this it could have a <link> element for every CSS file it uses.

Using Internal CSS

<style>

You can also include CSS rules within an HTML page by placing them inside a <style> element, which usually sits inside the <head> element of the page.
The <style> element should use the type attribute to indicate that the styles are specified in CSS.
The value should be text/css
When building a site with more than one page, you should use an external CSS style sheet. This:

Can change the styles used across all pages by altering just one file
Keeps the content separate from how the page looks
Allow all pages to use the same style rules (rather than repeating them in each page).

Exercises

Week 1

On the first week, we started our first webpage with textedit (No screenshots available for the project as forgot to take them in the MacLab.

Fig x.x First Webpage (30/03/22)

I decided to use information from Genshin Impact to create the website (because I really like this character :p) Besides the basic coding Mr Shamsul taught, I also attempted to add a photo onto the webpage. However, the photo won't appear outside of the Mac as I did not upload it to netlify.

Fig x.x Testing on Dreamweaver (08/04/22)

After downloading the dreamweaver on my laptop, I decided to reopen my html and noticed there were a lot of errors in the code. After asking Mr Shamsul I found out it was becuase of the "title="...". I was supposed to add a space in between " and title.

Fig x.x Fig x.x Testing on Dreamweaver (08/04/22)

After some edits, there were no more errors in the html.

Exercise 1

This week, we were tasked to create a web document based on the content Mr Shamsul gave. We had follow the format as is, including heading, sub heading, paragraph, lists and links. I ued Note Pad to finish this. I attempted to create links that open in another tab as an extra exercise for myself.

Fig x.x Exercise One (11/04/22)

When we were done with the code, Mr Shamsul taught us how to upload the file to Netlify.

Access link: https://exercise1-evaleezvoolianyun.netlify.app/

HTML:

Exercise 2

On Week 3, we were given the task to create a html page with the content given. We needed to add images to the required sections and insert id attributes as an anchor to be linked from the navigation section. This was a fun exercise and I had time, so I went to Google to find how to add colour onto the web page for some extra oomph :>.

Fig x.x Exercise Two (18/04/22)

Access Link: https://exercise2-evaleezvoolianyun.netlify.app/

HTML:

Exercise 3 (Layout Exercise)

For this exercise, we were required to create a single web page based on the content given in the link. We had to follow the layout as in the reference given in Google Classroom. An external CSS file was needed to create the layout as shown in class.

Fig x.x Hurdle in Exercise 3 (13/05/22)

One hurdle I faced doing this exercise was the background image would zoom in when I enlarge the screen, thus not showing the entire picture.

Fig x.x Hurdle in Exercise 3 (13/05/22)

After retrying again and again, it was still the same. I ended up calling a Computer Science friend for help and she suggested to write the code as in the photo above. Afterwards, the photo was responding how I wanted to.

HTML:

CSS:

Exercise 4: Bootstrap Exercise

In this exercise, we were introduced to Bootsrap. After understanding the basic concepts of it, I made created a site with carousell, navbar and cards.

HTML:

CSS:

Feedback

Always remember to check your spelling
Make sure you have the right naming method for your files.
Do not use Bootsrap v5 yet, it is not that stable yet.

Reflection

Throghout the semester, I learn a lot from Mr Shamsul in terms of coding. Not going to lie, I was a bit scared of coding at the start of the semester because it looked so complicated. However, after doing a bit more exercises, I actually found joy in doing them. It was so much fun and I believe I have acquired a new hobby for myself :>.

Search This Blog

Evaleez Voo Lian Yun (0350275)