INTERACTIVE DESIGN - EXERCISES
INTERACTIVE DESIGN - EXERCISES
27/08/20 - 08/10/20 (Week 1 - Week 7)
Chan Jing Wen (0340480)
Interactive Design
Exercise
LECTURE NOTES
Lecture 1 : Introduction to module, Websites
27/08/20 (Week 1)
At the beginning, Mr Shamsul went through the MIB and introduced our projects.
Project 1 is just static, no coding. We can have someone look at our website to see if they understand what's the purpose of the website. For project 2, we need to convert our prototype into an actual working website. For our final project, we'll need to create a website for our classmate.
Below are the lecture notes shared by Mr Shamsul :
Here is the notes taken during class :
A website is a web document on the web which might have one page or more. Websites serve a purpose, which is to attract their targeted audience on the internet.
There are different types of website :
03/09/20 (Week 2)
Below are the slides shared by Mr Shamsul :
Here is the notes taken during class :
Web Standards
Before we have the web, we only have internet. The internet is the infrastructure, you need internet to browse the web. In this era, our internet is connected through wires, not satellite.
After web was created, people only accessed the web through their monitor, keyboard, and mouse. As there are much more ways to access the web right now, we have different interfaces, even audible interfaces.
There are a variety of browsers (Microsoft, Internet Explorer, etc.) and operating systems (Windows, ios, etc.). There are also a variety of screen resolutions. Because of this, everyone might look at a website differently depending on what circumstances you're accessing the web. This is why we have a web standard to ensure that websites can work across many devices.
Web standards are the core set of rules for developing website. The central organization who is responsible for creating and maintaining web structure is the World Wide Web Consortium (W3C). They have standards for the markup language to build websites. The standard language is html and css. The creator of W3C is ... He create the W3C to share information and findings.
There are developers that create websites that go against the web standards. For example, during the earlier age of web, Adobe Flash for a platform where developers could create interactive interfaces. However, as it wasn't complying to the web standard, people have to download a player called SWF player in order to play Adobe Flash files.
It is important to have a web standard. It is easier for developers to understand each other's coding. It ensures that all browsers despite websites properly without having to rewrite for all the different browser.
How the web works?
When visiting a website, the web server hosting the site can be anywhere around the world. In order to find the location of the web server, our browser must be connected to a Domain Name Server (DNS) server.
Structure
When it comes to newspapers, catalogue, and other informational pieces that are traditional, we get information through a linear process. This means we have to go through the text from one page to another, following the sequence. In web page, you can jump to one page to another without going through a linear process. This is done by navigation.
As websites are just an electronical copy of traditional documents, there are still headings, text, and even photos. These aspects are kept as it helps people understand the document by creating a structure. For e-news, they basically have a similar layout as our traditional newspapers. The only difference is that it's an electronical version of newspapers and people can access it easily through their devices. For forms, there are difference sections which are separated by their headings and each section has questions of you to fill or checkboxes to tick. The use of headings and subheadings reflect a hierarchy of information.
HTML
HTML describes the structure of a page. We need to include codes to the words so it appears in a page as how a word document would display as.
HTML code is made up of characters that live inside angled brackets <> which are called HTML elements. Elements are usually made up of 2 tags : an opening tag and a closing tag.
eg : <element>information</element>
Each element tells the browser what kind of information is between the opening and closing tag.
Here is an example that indicates an information is a paragraph :
Opening tag : <p> | Closing tag : </p>
< is the left-angle bracket
p is the character
> is the right-angled bracket
/ is the forward slash
Attributes tells us more 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 sign. Spelling of attributes are all in English (US). If you spell it incorrectly / in English (UK), it will be an error and the website will not work well.
Here is an example that indicated the paragraph is in English (US) :
<p lang = "eng-us">Paragraph in English</p>
lang is the attribute name
eng-us is the value
When creating a new file, you need to explain your content. This helps the web to understand your website and it will recommend your website when users are searching for those keywords.
While looking at a webpage in html format, black colour text are content, purple colour text is html elements, and blue is the value of an attribute.
Body, Heading, Paragraph
The most commonly used html elements are <body> and <head> which shows body text and a heading, <title> lies within a heading.
For headings, there are six levels of headings. <h1> is the main heading, <h2> is the subheadings. If there are further sections under the subheadings, continue with <h3>
To create a paragraph, surround the words with <p> and </p>. NOTE : THERE IS NO P1 P2 P3...
<b> is to bold the text and <i> is for italic.
List
List can be differentiated into ordered list and unordered list. Ordered list are lists where each item is numbered. this is usually used when there's a set of steps. If the items aren't necessarily organized in a sequence, you can used an unordered list, which is bullet points. <ol> creates the ordered list. <li> is the element that lies at the opening of the item and the item ends with </li>.
Example of how an ordered list would look in HTML :
<ol>
<li> Crack the egg into a bowl</li>
<li> Beat the egg with a fork</li>
<li> Pour some oil into a pan</li>
<li> Pour the egg into the pan</li>
<li> Fry the egg</li>
</ol>
For an unordered list, the HTML element is <ul> for opening and </ul> for closing. <li> and </li> are used for the elements.
Sometimes there are a second list inside a existing list. This is called a sub-list or nested list. Browsers would display nested lists indented further than the parent list.
Example of how a nested list would look like in HTML :
<ol>
<li>Fruit
<ul>
<li>Grapes</li>
<li>Peaches</li>
</ul>
</li>
</ol>
Links
Links allow us to move from one web page to another. They are created using the <a> element and ends with a </a>. For writing links, the format is <a href = "http://www.google.com/">GOOGLE</a>
Lecture 3 :
27/08/20 - 08/10/20 (Week 1 - Week 7)
Chan Jing Wen (0340480)
Interactive Design
Exercise
LECTURE NOTES
Lecture 1 : Introduction to module, Websites
27/08/20 (Week 1)
At the beginning, Mr Shamsul went through the MIB and introduced our projects.
Project 1 is just static, no coding. We can have someone look at our website to see if they understand what's the purpose of the website. For project 2, we need to convert our prototype into an actual working website. For our final project, we'll need to create a website for our classmate.
Below are the lecture notes shared by Mr Shamsul :
Here is the notes taken during class :
A website is a web document on the web which might have one page or more. Websites serve a purpose, which is to attract their targeted audience on the internet.
There are different types of website :
- Informational Website
- Corporate Website
- Portfolio Website
- E-commerce Website
- Brochure Website
- Entertainment Website
- Educational Wesite
- Nonprofit Website
- Personal Website
03/09/20 (Week 2)
Below are the slides shared by Mr Shamsul :
Here is the notes taken during class :
Web Standards
Before we have the web, we only have internet. The internet is the infrastructure, you need internet to browse the web. In this era, our internet is connected through wires, not satellite.
After web was created, people only accessed the web through their monitor, keyboard, and mouse. As there are much more ways to access the web right now, we have different interfaces, even audible interfaces.
There are a variety of browsers (Microsoft, Internet Explorer, etc.) and operating systems (Windows, ios, etc.). There are also a variety of screen resolutions. Because of this, everyone might look at a website differently depending on what circumstances you're accessing the web. This is why we have a web standard to ensure that websites can work across many devices.
Web standards are the core set of rules for developing website. The central organization who is responsible for creating and maintaining web structure is the World Wide Web Consortium (W3C). They have standards for the markup language to build websites. The standard language is html and css. The creator of W3C is ... He create the W3C to share information and findings.
There are developers that create websites that go against the web standards. For example, during the earlier age of web, Adobe Flash for a platform where developers could create interactive interfaces. However, as it wasn't complying to the web standard, people have to download a player called SWF player in order to play Adobe Flash files.
It is important to have a web standard. It is easier for developers to understand each other's coding. It ensures that all browsers despite websites properly without having to rewrite for all the different browser.
How the web works?
When visiting a website, the web server hosting the site can be anywhere around the world. In order to find the location of the web server, our browser must be connected to a Domain Name Server (DNS) server.
- When connecting to a web, we do so via an ISP. Just type a domain number or web address in to the browser to visit the site.
- The computer contacts a network of servers called DNS servers which are like phone books. The tell the 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 allows the browser to contact the web server that host the website we're trying to search for. A web server is a computer that is constantly connected to the web and is set up especially to send web pages to users.
- The web server sends the page we requested to our web browser.
Structure
When it comes to newspapers, catalogue, and other informational pieces that are traditional, we get information through a linear process. This means we have to go through the text from one page to another, following the sequence. In web page, you can jump to one page to another without going through a linear process. This is done by navigation.
As websites are just an electronical copy of traditional documents, there are still headings, text, and even photos. These aspects are kept as it helps people understand the document by creating a structure. For e-news, they basically have a similar layout as our traditional newspapers. The only difference is that it's an electronical version of newspapers and people can access it easily through their devices. For forms, there are difference sections which are separated by their headings and each section has questions of you to fill or checkboxes to tick. The use of headings and subheadings reflect a hierarchy of information.
HTML
HTML describes the structure of a page. We need to include codes to the words so it appears in a page as how a word document would display as.
HTML code is made up of characters that live inside angled brackets <> which are called HTML elements. Elements are usually made up of 2 tags : an opening tag and a closing tag.
eg : <element>information</element>
Each element tells the browser what kind of information is between the opening and closing tag.
Here is an example that indicates an information is a paragraph :
Opening tag : <p> | Closing tag : </p>
< is the left-angle bracket
p is the character
> is the right-angled bracket
/ is the forward slash
Attributes tells us more 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 sign. Spelling of attributes are all in English (US). If you spell it incorrectly / in English (UK), it will be an error and the website will not work well.
Here is an example that indicated the paragraph is in English (US) :
<p lang = "eng-us">Paragraph in English</p>
lang is the attribute name
eng-us is the value
When creating a new file, you need to explain your content. This helps the web to understand your website and it will recommend your website when users are searching for those keywords.
While looking at a webpage in html format, black colour text are content, purple colour text is html elements, and blue is the value of an attribute.
Body, Heading, Paragraph
The most commonly used html elements are <body> and <head> which shows body text and a heading, <title> lies within a heading.
For headings, there are six levels of headings. <h1> is the main heading, <h2> is the subheadings. If there are further sections under the subheadings, continue with <h3>
To create a paragraph, surround the words with <p> and </p>. NOTE : THERE IS NO P1 P2 P3...
<b> is to bold the text and <i> is for italic.
List
List can be differentiated into ordered list and unordered list. Ordered list are lists where each item is numbered. this is usually used when there's a set of steps. If the items aren't necessarily organized in a sequence, you can used an unordered list, which is bullet points. <ol> creates the ordered list. <li> is the element that lies at the opening of the item and the item ends with </li>.
Example of how an ordered list would look in HTML :
<ol>
<li> Crack the egg into a bowl</li>
<li> Beat the egg with a fork</li>
<li> Pour some oil into a pan</li>
<li> Pour the egg into the pan</li>
<li> Fry the egg</li>
</ol>
For an unordered list, the HTML element is <ul> for opening and </ul> for closing. <li> and </li> are used for the elements.
Sometimes there are a second list inside a existing list. This is called a sub-list or nested list. Browsers would display nested lists indented further than the parent list.
Example of how a nested list would look like in HTML :
<ol>
<li>Fruit
<ul>
<li>Grapes</li>
<li>Peaches</li>
</ul>
</li>
</ol>
Links
Links allow us to move from one web page to another. They are created using the <a> element and ends with a </a>. For writing links, the format is <a href = "http://www.google.com/">GOOGLE</a>
Lecture 3 :
10/09/20 (Week 3)
Lecture 4 : Introduction to CSS
17/09/20 (Week 4)
INSTRUCTIONS
EXERCISE
27/08/20 (Week 1)
INSTRUCTIONS
EXERCISE
27/08/20 (Week 1)
Class Activity 1:
We were told to find some examples of bad and good websites and write down our reasons we classify them as good or bad as well as the basic information of the website. I was grouped with Kelly and Rachel for this exercise so all 3 of us found one example each for a good website and a bad website.
We were told to find some examples of bad and good websites and write down our reasons we classify them as good or bad as well as the basic information of the website. I was grouped with Kelly and Rachel for this exercise so all 3 of us found one example each for a good website and a bad website.
03/09/20 (Week 2)
Class Activity 2 :
For this class, we followed Mr Lun's tutorial on creating a simple webpage using NotePad on PC. The codes in the screenshot below are all following Mr Lun's tutorial in class.
Practice 1:
For this class, we followed Mr Lun's tutorial on creating a simple webpage using NotePad on PC. The codes in the screenshot below are all following Mr Lun's tutorial in class.
 |
| Figure 1.1 Screenshot of the exercise |
Practice 1:
As practice, we will have to do a simple document website. We will need 3 sections :
Section 1 : About Yourself
Section 2 : Experience in Interactive Design
Section 3 : Expectations in Interactive Design
We will need to drag the folder to netlify website and submit the generated link into google classroom.
I basically did my exercise with my opened html link. I constantly saved my html file and reload the page to make sure I'm on the write track.
In the end I uploaded the file to netlify. Click here to see the webpage.
Section 1 : About Yourself
Section 2 : Experience in Interactive Design
Section 3 : Expectations in Interactive Design
We will need to drag the folder to netlify website and submit the generated link into google classroom.
 |
| Figure 1.2 Screenshot of the exercise |
I basically did my exercise with my opened html link. I constantly saved my html file and reload the page to make sure I'm on the write track.
In the end I uploaded the file to netlify. Click here to see the webpage.
17/09/20 (Week 4)
Exercise 1 pt. 1:
We were given a article to do our webpage on. We had to write all of the codes in Adobe Dreamweaver. Mr Shamsul and Mr Lun also thought us how to adjust the image size in order for it to show well on the web.
As I couldn't install Dream Weaver, I typed out all of the codes in Note Pad as a practice.
Here is a screenshot of the interface of the webpage and my codes in notepad.
 |
| Figure 1.3 Webpage vs Codes in Notepad |
Figure 1.4 Progression of Webpage Layout for Exercise 1
24/09/20 (Week 5)
Exercise 1 pt. 2:
This week, I finally was able to download Dream Weaver. We were mainly taught on creating the hover. I also edited the colours and everything based on what we were taught in class.
Below are some of the codes in html:
 |
| Figure 1.5 Screenshot of codes for Exercise 1 in Dreamweaver 01 |
 |
| Figure 1.6 Screenshot of codes for Exercise 1 in Dreamweaver 02 |
 |
| Figure 1.7 Screenshot of codes for Exercise 1 in Dreamweaver 03 |
 |
| Figure 1.8 Screenshot of codes for Exercise 1 in Dreamweaver 04 |
Week 6 (01/10/20)
Practice 2:
We were taught how to do flex and float. Below are the screenshots of the code and a live view of the website designed.
 |
| Figure 2.1 Screenshot of codes for Practice 2 in Dreamweaver 01 |
 |
| Figure 2.2 Screenshot of codes for Practice 2 in Dreamweaver 02 |
Week 7 (08/10/20)
Practice 3:
This week, we were taught to use columns with bootstrap. Below are some of the screenshots of the code used during the practice.
 |
| Figure 2.3 Screenshot of codes for Practice 2 in Dreamweaver 01 |
 |
| Figure 2.4 Screenshot of codes for Practice 2 in Dreamweaver 02 |
Exercise 2:
For this exercise, Mr Shamsul gave us a layout of a webpage and we had to try recreating it or refining it. We were given the text and images for this exercise.
Below are some of the screenshot from my attempt.
 |
| Figure 2.5 Screenshot of codes for Exercise 2 in Dreamweaver 01 |
 |
| Figure 2.6 Screenshot of codes for Exercise 2 in Dreamweaver 02 |
Comments
Post a Comment