Interactive Design - Lectures and Exercises

29/3/2022 - 10/5/2022 (Week 1 - Week 7)

Sasilvia Cheong Pei Hoong / 0345031 / Bachelors of Design in Creative Media
Interactive Design
Lectures and Exercises

---

LECTURES

WEEK 1 - What is a Website?

It is a web document in the internet with one page or more and with an intended purpose.

Different Types of Websites:

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

Basic Site Evaluation

Basic understanding of the principles behind effective website design and implementation. Web design requires careful planning and consideration of what exactly that defines a good website.

Surveying the Possibilities

The purpose of this lesson is to begin considering what makes a high-quality website. As a group, we will explore questions such as these: 

• Why do you feel that some websites are good? 
• Why do you feel that some websites are not so good? 
• Do others agree with your opinion? 
• Does anyone disagree? 
• Who is the target audience for a particular site? 
• How might website quality be judged differently across different audiences? 
• Are there some qualities of websites that all audiences would agree are good? 
• What are these qualities?

It is important to understand the what "quality means because if websites are not developed with quality in mind, visitors might find it hard or are not able to access or use these features. The quality of the site will determine whether the users will come back or not. 

Planning a website is vital before beginning to develop its content. Planning ahead will reduce the number of mistakes when constructing the site which will save both time and money. 

Outcome

At the completion of this exercise:

• Be able tp critically evaluate web sites based on purpose, design and usability
• Be able to identify the major criteria that experts use to evaluate web sites and apply those criteria to our own evaluations

WEEK 2 - Web Design and New Media

Web Standards

These days people are able to easily access the web , such as on their mobile devices, tablet instead of keyboards and a mouse. 

Hardware and software issue:

Growing variety browsers, including Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari, and others. People use variety of operating systems, including Windows, Mac OS, and Linux. Screen resolutions are set from 640 x 480 pixels to 1680 x 1050 pixels and beyond.

Diversity of ways people access the web means that there is a very high probability that your website will look different. The most important part of a website is content. To make sure a website work across all devices and configurations is to develop in accordance with web standards. It might be possible to develop sites that do not comply with standards, but doing so increases the likelihood that many people will be unable tp access your site. 

The central organization to create and maintain web standards is the World Wide Web Consortium (W3C). The standards include, markup languages we use to build websites which are HTML and CSS

Why web standards?

To make the internet a better place, for both developers and visitors.

How the web works

When visiting a website, the host of the web server could be anywhere in the world, to find the location of the web, the browser has to first be connected to a Domain Name System (DNS) server.

Structure of a web page

In any text, the choice of headings and subheadings generally reflects a hierarchy of information. Each topic might have its own paragraph, and each part may have a headline that explains what it is about.

HTML structure

The HTML code is made up of characters that live inside angled brackets <>. Which are called HTML elements. The elements are usually made up of two tags an opening and closing tag. In the tag contains information. 

Fig. 1.1 Opening and closing tag

Fig. 1.2 Closer look of opening tag

Fig. 1.3 Closer look of closing tag

Fig. 1.4 Attributes

Body, head and title

<head>

-Before <body> , <head> will be seen first. Which contain information about the page

<body>

-Everything inside is shown inside the main browser window

<title>

Shown in the top of the browser (tab bar)

Headings

HTML has six levels of headings:

<h1> main heading

<h2> subheadings

<h3> and so on

Paragraph

<p> opening tag

</p> closing tag

Bold

<b> opening tag

</b> closing tag

Italic

<i> opening tag

</i> closing tag

Lists

Ordered list

Each item of the list is numbered

<ol> opening tag

</ol> closing tag

<li> opening tag

</li> closing tag

li stands for list item

Fig. 1.5 Example of ordered list

Unordered list

List that begin with a bullet point

<ul> opening tag

</ul> closing tag

Nested list

A second list can be put inside an <li> element to create a sub-list or nested list.

Fig. 1.6 Example of nested list

Links

Links are defining features allows you to move from one web page to another

Commonly type of links:

• Links from one websites to another
• Links to one page to another on the same website
• Links from part of a web page to another part of the same page
• Links that open in a new browser window (tab)

Writing links

<a> opening tag

</a> closing tag

Specify which page to link using the href attribute

Fig. 1.7 Writing links

Linking to other sites

The href attributes is the page that you want the user to go when they click on the link. When you link to a different website, the value of the href attribute will be the full web address for the site, also known as an absolute URL. Browsers show links in blue with an underline by default.

WEEK 3 - Adding image in HTML

<img> 

The image tag is a single sided element which does not have a closing tag like other HTML element. The tag is considered empty until a attribute is added.

src attributes specify the location of the image

• <img src="url">
• <img src="img_flower.jpeg">
• <img src="http://stockimages.anylink.com">

Alt attribute is added to describe the image

• <img src="img_flower.jpeg" alt="Flowers in Denmark">

Specify the width and height by adding these attributes

• <img src="img_flower.jpeg" alt="Flowers in Denmark" width="500" height="350">

Image formats for Web

Three common image formats for Web:

• JPEG (Joint Photographic Expert Group)
• GIF (Graphics Interchange Format)
• PNG (Portable Network Graphics)

JPEG (Joint Photographic Expert Group)

• Most common image format used on the Web
• Highly compatible and small size and very little loss of quality
• Saved using lossy compression
• Usually for photos on the Web

GIF (Graphics Interchange Format)

• Uses lossless compression
• Save the image over and over again without losing any data
• It uses 8-bit lossless format which support a maximum of 265 colours 
• Unique feature of this format is its ability to be animated
• Excellent choice for logo, limited color images that need to be in small size
• Small in size but not suitable for photos

PNG (Portable Network Graphics

• Contain a bitmap of indexed colours and uses lossless compression
• Allows full range of color and better compression
• The most used format on the Web
• Support image with transparent background

ID and Class attribute

By default, using these attributes does not affect the presentation of an element. It will only change their appearance if there is a CSS rule that indicates it should be displayed differently.

Extra Markup

ID attribute

• Every HTML element can carry the ID attribute
• 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)
• Giving an element a unique identity allows you to style it differently from any other instance of the same element on the page
• Eg: You might want to assign one paragraph within the page a different style from all of the other paragraphs

Class attribute

• Every HTML element can also carry a class attribute
• Identify several elements as being different from the other elements on the page
• Eg: You might have some paragraph that contain information that is more important than others and want to distinguish between these elements
• 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
• Known as block level elements
• Eg: <h1>, <p>, <ul> and <li>

Inline elements

• Some elements will always appear to continue on the same line as their neighboring elements
• Known as inline elements
• Example: <b>, <i>, <em>, <a> and <img>

WEEK 5 - CSS

Bold (font-weight)

• Create bold text
• Two values that this property commonly takes:
• Normal-text appear at a normal weight
• Bold-text to appear bold

Italic (font-style)

• To create italic text, font-style property can be used
• Three values this property can take:
• Normal-text to appear in normal style
• Italic-text appear italic
• Oblique-text appear oblique

Uppercase and lowercase (text-transform)

• Text-transform is used to change the case of text giving it one of the following values:
• Uppercase-text appear uppercase
• Lowercase-text appear lowercase
• Capitalise-first letter of each word to appear capitalised

Underline and Strike (text-decoration)

• The text-decoration property allows 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

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 (eg:-10px)

Drop shadow (text-shadow)

• The text-shadow property has become commonly used despite lacking support in all browsers
• It is used to create a drop shadow, which is a dark version of the word just behind it and slightly offset
• It can be used to create an embossed effect by adding a shadow

WEEK 7 - HTML and CSS in class exercise

Fig. 1.1 HTML and CSS in-class exercise Week 7 (10/5/2022)

---

INSTRUCTIONS

---

Surveying the Possibilities:

Activities 

• What is a high-quality website? As a group, discuss the questions presented in the Overview section above. 
• What do the experts say? Visit this websites: http://www.webbyawards.com, http:// www.thebestdesigns.com or any other website that you think is good or bad. 
• Each of these resources provides someone else's opinions as to what constitutes high-quality websites. Which of these resources do you most agree with? Do you disagree with any of these authors' opinions? Do the winners of Webby Awards have features or characteristics that you don't like? Discuss this as a group. 
• Become a web critic. Browse the web and choose SIX website that's good and SIX that's bad. 
• Comment on the site's design. Does the site look good? What is the eye drawn to immediately? 
• Comment on the site's content. What seems to be the main purpose of the site? Is the purpose clear?

Fig. 1.1 Exercise (1)  Task 1: Surveying the Possibilities PDF (5/4/2022)

Exercise 1 : 

We were provided with two pages of content to code out in HTML format. Where we had to utilize headings, paragraphs, bold, italic, and links. 

Fig. 2.1 Exercise 1 content (7/4/2022)

I started off typing down my codes in notes since I still have not tried out Adobe Dreamweaver yet and did not want to risk it. But after looking at tutorials online and some reassurance from a friend I pasted all my codes in there and to my surprise, it was easier than I expected. The whole progress was pretty fun, the only struggle I faced was remembering the code for the link.

Fig. 2.2 Exercise 1 final HTML codes (15/4/2022)

Platform used: Adobe Dreamweaver

Netlify link: https://exercise-1-sasivliacheong.netlify.app/

Exercise 2 : 

For this exercise, we were provided 5 pages of content and with a twist where we have to insert the provided images into the website as well. 

Fig. 3.1 Exercise 2 content (14/4/2022)

Fig. 3.2 Images provided (14/4/2022)

I used Adobe Dreamweaver to code everything out, then I downloaded the images and insert them into the same file as the codes so that I will be able to link the images into the code. The images are pretty sensitive were putting in a way the too big scale of an image will ruin everything sometimes the images will be too long sometimes too short. 

Fig. 3.2 Exercise 2 final HTML codes (18/4/2022)

Platform used: Adobe Dreamweaver

Netlify link: https://exercise-2-sasilviacheong.netlify.app/

Exercise 3 : 

In exercise 3 we are required to take our HTML and CSS code learnings from class and create a layout based on the reference given where the content and images provided by Mr. Shamsul. 

Fig. 4.1 Exercise 3 Layout content reference (11/5/2022)

Fig. 4.2 Images provided (11/5/2022)

First I analyzed the content given and refer back to the previous exercise we did in class to refresh my memory a little. This exercise was hard and I found many obstacles while working on it, having both HTML and CSS makes me really confused. There are certain codes that I find really hard to understand as well. At first, I was finding ways to put the topic on the images then I struggled with making the web work when resizing and after actually making it work another problem comes out where the pink box goes wack. Using the media code helps a lot with the viewing like phone and resizing it. 

Fig. 4.3 Exercise 3 final HTML and CSS codes (15/5/2022)

Platform used: Adobe Dreamweaver

Netlify link: https://layout-exercise-3-sasilviacheong.netlify.app/

---

FEEDBACK

No Feedback

---

REFLECTIONS

Through the exercise given, I was able to learn the basics of coding which will help me in the other projects. I initially found HTML coding not that bad, but once we started CSS coding it was dreadful. The amount of errors and mistakes that were made, and the need to look at my codes for hours to find that mistake and fix it is exhausting.