Interactive Design: Exercises

30.03.2022 - 11.05.2022 (Week 1 - Week 7)

Metta Angelica (0349095)

Bachelor of Design (Hons) in Creative Media

Interactive Design - Exercises

LIST

Lecture
Instruction
Reflection

LECTURE

Week 1

In the first week, Mr. Shamsul brief us about our MIB for the further exercise and tasks we will be doing this semester as well as what we will achieve from this.

After that, we learn about what is a website about and things such as URLs and what do they do.

First, what is a website?
A website is a web document in the internet that contain one page or more with an intended purpose.

There are different types of websites, such as:

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

Week 2

Web Design and New Media

Web Standards

In the early days of the Web, everyone accessed the Web using a keyboard, mouse, and monitor. Today, there s much more variety in the ways people can access the Web.

Many people do so on their phones or other pocket mobile devices. Many people do so on tablet computers with touch screen interfaces instead of keyboards and mice. Some people access the web through audible interfaces (they talk to the computer, or they listen to the computer talk to them, or both).

Many people who are blind depend on speech output, and people who are unable to use their hands depend on speech input.

Hardware and software issues:

Growing variety of browsers that people can choose from, including Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Opera, Safari, and Others.
People use a variety of operating systems, including Windows, Mac OS, and Linux.
People have their computers set to a wide variety of screen resolutions, from 640 x 480 pixels to 1680 x 1050 pixels and beyond.

With the diversity in the way people access the web, there's a very high probability that your website will look different to many of your visitors than it does to you.

Despite these differences, the most important part of your website is its content, and all users should be able to access that.

The only way to ensure that websites work across all devices and configurations is to develop in accordance with web standards.

Web standards are the core set of rules for developing websites. 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 to access your site.

The central organization who is responsible for creating and maintaining web standards is the World Wide Web Consortium (W3C).

The W3C has defined dozens of standards, including the standard markup languages we use to build websites. The stand markup languages we'll be using in this course are:

HTML
CSS

Why Web Standards?

To make internet a better place, for both developers and visitors, it is important that both browsers and Web developers follow the Web standards.
When developers follow the Web standards, the development follow the Web standards, and the development is simplified since it is easier for a developer to understand another scolding.
Using Web standards will ensure that all browsers will display your Web properly, without time-consuming rewirtes.

How The Web Works

When you visit website, the web server hosting that site could be anywhere in the world.

In order for you to find the location of the web server, your browser will first connect to a Domain Name System (DNS) server.

When you connect to the web, you do so via ISP. You type a domain name or web address into your browser to visit a site; eg: www.google.com, www.bb.co.uk
Your computer contacts a networks of servers called DNS servers. These act like phone book; they tell your computer the IP address associated with the requested domain name. Every device don't the web has a unique IP address; it's like the telephone number for that computer.
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 is constantly connected to the web, and is set up especially to send web pages to user.
The web server then sends the pagyou requested back to your web browser.

Week 3

Week 4

Week 5

Week 6

*No Class*

Week 7

INSTRUCTION

Exercise: Surveying the Possibilities

For this exercise, we will be evaluating websites and think about what makes the website good? or is there anything that doesn't feel good?

The purpose of these tasks is to help us understand what "quality" means. This is important because if websites aren't developed with quality in mind, visitors might be unable to access or use these features.

At the completion of this website, you will be able to critically evaluate websites based on purpose, design, and usability.

My progress

First, I went to the websites that were given by the teacher. We can only evaluate sites that are in those web pages.

These are the 2 webpages where we can get websites we can use to evaluate:

Submission

Here is the link to my Google Excel Sheet.

Exercise 1: HTML

In this exercise, we are required to make a webpage base on the content given by the teacher, and upload the webpage in netifly. We will be taught by the teacher how to upload it in week 3.

This are the content given that we need to make.

This is the HTML preview of the code I did.

Submission

Here is the link to the Netifly.

https://62566aad0172a43fbd8e0029--exercise1-mettaangelica1.netlify.app

Exercise 2

In this exercise, we are making another webpage using the skills we had learned in our previous class.

Below is the content of this exercise.

This is the link to the images folder.

Google folder - images

Submission

This is the preview of the HTML code.

This is the Netifly link: https://625ecba8b23b7918f34091f7--exercise2-mettaangelica.netlify.app

Exercise 3: Layout Exercise

In this exercise we will be making a website but with layouts.

Progress

Fig. 1

Fig. 2

I wasn't able to find Avenir Font so I had to use another font.

Fig. 3

Fig. 4

Final Submission

Netifly link: https://627f36f97f063c2929c38175--layout-exercise-metta.netlify.app

REFLECTION

Doin this execise is fun, but it is a bit hard to understand the code's properties. I struggled at the 3rd exercise, it was hard to figure what does this properties do.

Search This Blog

Metta Angelica (0349095)