Interactive Design - Exercises
Atiqah Farzana Binti Syalleh Karimyee (0336740)
Interactive Design
Exercises
LECTURE NOTES
Week 1 (15/04/20)
Our first class was held via Zoom with Mr. Shamsul and Mr. Lun. We were briefed on the module and assignments and future projects to come.
Free web hosting service for us to upload all our web documents:
The first lecture was about websites.
Here are the 9 types of websites:
- International website
- Corporate website
- Portfolio website
- E-commerce website
- Brochure
- Entertainment website
- Educational website
- Nonprofit website
- Personal website
Week 2 (22/04/20)
- html and
- css
Web standards makes the internet a better place for both developers and visitors to ensure ease of access for both ends.
Structure helps readers to understand the context. Each page will have a headline, body copy, and images, sometimes even subheadings and more.
The HTML code is made up of characters that live inside angled brackets (< >). These are called HTML elements and they are made up of two tags: an opening tag and a closing tag.
 |
| Fig. 1.1 Opening/ Closing Tags |
The <body> element shows the body text which will be shown inside the main browser window.
The <title> element is shown at the top of the browser
The <head> is shown before the <body> element and contains information about the page. The <title> is usually inside the <head>.
Headings
<h1> are the main headings.
<h2> are the subheadings.
<h3> go under the subheadings, and this goes on until <h6> only.
 |
| Fig. 1.2 <h1> to <h6> Tags |
 |
| Fig. 1.3 Results of <h1> to <h6> Tags |
<p> for paragraph
<b> for bold
<i> for italics
<li> lists
<ol> for ordered lists ( numbered items)
<ul> unordered lists (bullet points)
Both ordered and unordered lists have to be contained inside a list or <li></li>.
A nested list is a list inside a list.
 |
| Fig. 1.3 Nested List Tags |
 |
| Fig. 1.4 Result of Nested List Tags |
Lastly, <a> is for links, but it's a bit more complicated than the rest. A href (hyperlink reference) needs to be used to direct the text to the other website.
This weeks lecture is all about changing the appearance of our website.
Block-level element
INSTRUCTIONS
Module Information Booklet:
EXERCISE
Week 1 (15/04/20)
Mr. Shamsul gave us an hour to research on the 9 different types of websites. The purpose of this activity is for us to understand the different definitions of purpose and intended audience for various types of websites. It is important for us to be able to create a specific and clear purpose of a website later in the future.
Example and format of the slides:
Example/image of the website
Nonprofit website
link
Target audience: General public
Objective: Raising awareness, fundraising donation
Here are my slides:
Week 2 (22/04/20)
This week we had to make our own basic website using HTML in notepad. This is my attempt:
Week 3 (29/04/20)
We were told to install Dreamweaver before this class so we could finally start creating our HTML websites. Mr. Shamsul provided us a Google Drive with the content and images that we need to use in our HTML.
Fig. 1.9 Progress of html
The feedback I got was that my body text was a bit big (which is fine) but the line spacing/ height should be increased because it seemed too tight. Everything else is fine. I made the changes and here is my HTML:
In css:
Observation: Week 1 (15/04/2020); Coding is something kinda completely new to me and most of my classmates, so let's see how far we could survive this module. Week 2 (22/04/2020); There's a lot of new stuff to learn about coding and I don't know whether I'd be able to absorb them all completely. Week 3(29/04/2020); Now that we started coding on a proper software, it feels more organised and professional compared to using the notepad app. Week 4 (06/05/2020); I find myself stuck in the middle of doing coding sometimes if I'm not properly awake or in the right mindset to work yet :S Week 5 (13/05/2020); Absent.
Findings: Week 1 (15/04/2020); I feel like this module, in particular, might be kind of difficult to conduct as an online class once we started doing the coding stuff. Week 2 (22/04/2020); I found that the lectures were quite lengthy as there was a lot to learn from today. Week 3(29/04/2020); I find myself getting jumbled up with the coding especially working back and forth with the html and css. Week 4 (06/05/2020); I'm starting to get the hang of things and it's very satisfying to see my website working. Week 5 (13/05/2020); Absent.
 |
| Fig. 1.5 Link Tags |
Week 3 (29/04/20)
To add an image in HTML:
<img src="url">
The src attributes specify the location of the image. For example, the picture is named "flower" and is saved as a jpeg.
<img src="flower.jpeg">
If the image is from the internet, then the url link has to be placed instead.
<img src="http://stockimages.anylink.com">
An 'alt' attribute is added to describe the image in case it doesn't load in the browser, or is too large to load and will take a while to do so.
<img src="flower.jpeg" alt="Flowers in Denmark">
Height and width could also be adjusted with these attributes:
<img src="flower.jpeg" alt="Flowers in Denmark" width="500" height="350">
The three most common image formats on the web:
- JPEG
- GIF
- PNG
Week 4 (06/05/20)
CSS (Cascading Style Sheet) allows us to create rules that specify how the content of an element should appear. It can be external as well as internal.
External CSS uses a link element in an HTML document to tell the browser where to find the CSS file used to style the page. This is more useful if you have more than one page for your website. It should use these 3 attributes:
- href; To specify the path to the CSS file
- type; This attribute specifies the type of document being linked to. The value should be text/css
- rel; Specifies the relationship between the HTML page and the file linked to. The value should be stylesheet when linking to a CSS file
Internal CSS is placed inside an HTML page, inside a <style> element which usually sits inside the <head> element.
<style type="text/css">
A selector indicates which element the rule applies to (p {}, body {}).
A declaration indicates how the element referred in the selector should be styled. They are split into 2 parts: a property and a value, separated by a colon, and ends in a semicolon. (eg. font-family: Arial;)
 |
| Fig. 1.6 Selector and Declatartion |
A property indicates the aspects of the element you want to change (eg. color, font, width, height)
Values specify the settings for the chosen properties (eg. color: yellow)
 |
| Fig. 1.7 Property and Value |
Other key points:
- <h1, h2, h3> don't need to change font size because they already have a set size.
- internal CSS style will only affect 1 HTML page, it's not worth the effort to use this if you have more than one page for your website
- don't use too much color in your website because it will look ugly
- semicolon must be at the end of every declaration
- "font" includes everything (size, style, etc) whereas "font-family" needs the values to be written separately
- should always name the first site as "index"
Week 5 (13/05/20)
This weeks lecture is all about changing the appearance of our website.
min-width specifies the smallest size a box can be displayed at when the browser window is narrow, and max-width indicates the maximum width a box can stretch to when the browser window is wide. This ensures the contents will be legible on any screen.
min-height and max-height follows the same rules, but with height.
Overflowing content or 'overflow' tells the browser what to do if the content in a box is larger than the box itself. It can have one of these 2 values:
- hidden - hides any extra content that doesn't fit the box
- scroll - adds a scrollbar to the box
Every box has a border, even if it is not visible this means it is at 0px wide.
Margins sit outside the edge of the border.
Padding is the space between the border of a box and any content contained within it. Increasing it will achieve better readability.
Block-level element
<div> is the standard block-level element. Other common block-level elements include p and form, and in HTML5 are header, footer, section and more.
Inline element
<span> is the standard inline element. It can wrap text inside a paragraph without disrupting the flow of said paragraph.
The a element is the most common inline element, it's used for links.
INSTRUCTIONS
Module Information Booklet:
EXERCISE
Week 1 (15/04/20)
Mr. Shamsul gave us an hour to research on the 9 different types of websites. The purpose of this activity is for us to understand the different definitions of purpose and intended audience for various types of websites. It is important for us to be able to create a specific and clear purpose of a website later in the future.
Example and format of the slides:
Example/image of the website
Nonprofit website
link
Target audience: General public
Objective: Raising awareness, fundraising donation
Here are my slides:
Week 2 (22/04/20)
This week we had to make our own basic website using HTML in notepad. This is my attempt:
Week 3 (29/04/20)
We were told to install Dreamweaver before this class so we could finally start creating our HTML websites. Mr. Shamsul provided us a Google Drive with the content and images that we need to use in our HTML.
 |
| Fig. 1.8 Images for Website |
Fig. 1.9 Progress of html
After showing my work, Mr. Shamsul spotted a few errors in my work. Firstly, I needed to have "target=_blank" after my links so that they open in a new tab. Links from a different website need to open in a new tab so that the users will know that it is not from my website.
He also said that my images needed to have the folder name before it, and I also need to keep all my pictures in that same folder. Other than that, everything was fine.
He also said that my images needed to have the folder name before it, and I also need to keep all my pictures in that same folder. Other than that, everything was fine.
Here are images of the completed website:
 |
| Fig. 1.10 Exercise 1 (1) |
 |
| Fig. 1.11 Exercise 1 (2) |
 |
| Fig. 1.12 Exercise 1 (3) |
 |
| Fig. 1.13 Exercise 1 (4) |
Week 4 (06/05/20)
Using the same HTML we did last week, we had to add an internal CSS style. This allows us to make changes in our website at one time without having to change it one by one.
Using the same HTML we did last week, we had to add an internal CSS style. This allows us to make changes in our website at one time without having to change it one by one.
 |
| Fig. 1.14 Progress of css |
The feedback I got was that my body text was a bit big (which is fine) but the line spacing/ height should be increased because it seemed too tight. Everything else is fine. I made the changes and here is my HTML:
Week 5 (13/05/20)
We had to make a layout design in Dreamweaver using both html and css. It was quite a lot compared to our previous exercises so Mr. Shamsul uploaded a video tutorial for it:
We had to make a layout design in Dreamweaver using both html and css. It was quite a lot compared to our previous exercises so Mr. Shamsul uploaded a video tutorial for it:
Here is the layout that Mr. Shamsul made for us to refer to:
 |
| Fig. 1.15 Layout Reference |
There were a few important things that we learnt. One of them was to define a site, which is essentially linking the html and css together. At the right-hand side of Dreamweaver there is a tab called 'CSS Designer'. After clicking the '+' sign I can attach a new or existing css file so they can be synced. After they're linked, you can close the css tab because your html will have 2 tabs in your html already.
 |
| Fig. 1.16 Defining a Site |
Mr. Shamsul also taught us how to use shorthand keys to make coding more efficient. For example, instead of writing 'margin-left' and 'margin-top', we can simplify it to just 'margin' and write the respective #px in the same line. It follows clockwise direction so the order will be top, right, bottom, then left.
 |
| Fig. 1.17 Shorthand Keys |
If you use a class name (in html), you have to use a period before the class name in css.
In html:
 |
| Fig. 1.18 Class Name in html |
In css:
 |
| Fig. 1.19 Class Name in css |
Here is how my website looks like in Google Chrome:
 |
| Fig. 1.20 Final Layout Outcome |
We were tasked with our first layout exercise. Mr. Shamsul provided us with the content and images for us to include in our exercise.
Fig. 1.21 Content for Exercise
 |
| Fig. 1.22 Images for Exercise |
Here is my html script:
Here is my css script:
Here is the final website layout!
I think this exercise was really challenging for me but I hope coding gets easier after more practice. From the tutorial session, I was able to see my classmate's websites and hear Mr. Shamsul and Mr. Lun's feedbacks for them. My layout was still far from completion when I showed mine but Mr. Shamsul suggested that I listen and take note of what was good/ bad in my classmate's layouts. Some important elements included proper line spacing/ height, image sizes, font sizes, colour choices and schemes, etc. There was one layout in particular that was very professional which used a light grey background for their container, just to differentiate it from the other articles. Mr. Shamsul said this was a very smart and effective layout so I wanted to incorporate it into my website as well.
I decided to take a look at the official Photoshop website for inspiration. They used large images and fonts while keeping everything clean and minimalistic. Their background was white, with occasional containers that were black to give it contrast. The font used was called Adobe Clean, which is most probably their own font inaccessible to others. However, I found a close replica which was 'Ubuntu'!
 | |||
| Fig. 1.23 Photoshop Website |
These are the different sections of my website:
 | |
|
 | |
|
 |
| Fig. 1.26 Sub Article 1 |
 |
| Fig. 1.27 Sub Article 2 |
 |
| Fig. 1.28 Sub Article 3 |
 |
| Fig. 1.29 Sub Article 3 and Footer |
Here is the final website layout!
Week 8 (03/06/20)
We had to make a website using Bootstrap, with the given content and images:
 |
| Fig. 1.30 Images for Bootstrap Exercise |
 |
 |
| Fig. 1.31 Bootstrap Exercise Website Screenshots (Compiled) |
Click here to see the completed website.
Mr. Shamsul said that it was a good attempt but it was not necessary to change the shape of the image place holder (referring to the circular images). It was just something I wanted to try out after seeing Mr. Lun give a demonstration on the image border customizations.
FEEDBACK
Week 1 (15/04/2020)
No feedback.
Week 2 (22/04/2020)
No feedback.
Week 3(29/04/2020)
Exercise 1: Add "target=_blank" after my links so that they open in a new tab. Links from a different website need to open in a new tab so that the users will know that it is not from my website. The images need to have the folder name before it, and I also need to keep all my pictures in that same folder. Other than that, everything was fine.
Week 4 (06/05/2020)
Exercise 1 (part 2): The feedback I got was that my body text was a bit big (which is fine) but the line spacing/ height should be increased because it seemed too tight. Everything else is fine.
Week 5 (13/05/2020)
Absent.
Week 6 (20/05/2020)
Exercise 2: My layout was still far from completion when I showed mine but Mr. Shamsul suggested that I listen and take note of what was good/ bad in my classmate's layouts. Some important elements included proper line spacing/ height, image sizes, font sizes, colour choices and schemes, etc.
REFLECTION
Experience: Week 1 (15/04/2020); Online classes still feel a bit odd and unfamiliar to me but the session was fine.Week 2 (22/04/2020); The internet connection was kinda unstable to we had to stop the class a few times which also disrupted the flow. Week 3(29/04/2020); Using Dreamweaver for the first time made me feel like a high-profile hacker :^) Week 4 (06/05/2020); We are slowly learning how to customise our website with colour, fonts and layout so it's more fun. Week 5 (13/05/2020); Making the landing page was quite a challenging task, but that made it more satisfying to see the end result.
Experience: Week 1 (15/04/2020); Online classes still feel a bit odd and unfamiliar to me but the session was fine.Week 2 (22/04/2020); The internet connection was kinda unstable to we had to stop the class a few times which also disrupted the flow. Week 3(29/04/2020); Using Dreamweaver for the first time made me feel like a high-profile hacker :^) Week 4 (06/05/2020); We are slowly learning how to customise our website with colour, fonts and layout so it's more fun. Week 5 (13/05/2020); Making the landing page was quite a challenging task, but that made it more satisfying to see the end result.
Observation: Week 1 (15/04/2020); Coding is something kinda completely new to me and most of my classmates, so let's see how far we could survive this module. Week 2 (22/04/2020); There's a lot of new stuff to learn about coding and I don't know whether I'd be able to absorb them all completely. Week 3(29/04/2020); Now that we started coding on a proper software, it feels more organised and professional compared to using the notepad app. Week 4 (06/05/2020); I find myself stuck in the middle of doing coding sometimes if I'm not properly awake or in the right mindset to work yet :S Week 5 (13/05/2020); Absent.
Findings: Week 1 (15/04/2020); I feel like this module, in particular, might be kind of difficult to conduct as an online class once we started doing the coding stuff. Week 2 (22/04/2020); I found that the lectures were quite lengthy as there was a lot to learn from today. Week 3(29/04/2020); I find myself getting jumbled up with the coding especially working back and forth with the html and css. Week 4 (06/05/2020); I'm starting to get the hang of things and it's very satisfying to see my website working. Week 5 (13/05/2020); Absent.
Comments
Post a Comment