Interactive Design

INTERACTIVE DESIGN - EXERCISES

24/8/2021 -21/9/2021 (Week 1 - Week 4)

Mariam Ayman Mohamed Abouelala (0347638)

Bachelors of Design (Hons) in Creative Media / Taylor's University

Interactive Design - Exercises

INSTRUCTIONS

LECTURES

Lectures notes

Week 1

Our first class of Interactive Design was taught by Mr.Mike. The lecture was mainly about he Web and how it works. Mr. Mike (stand-in lecturer) talked about the difference between webpages, browser, and websites.

Types of Websites

1. Business Websites
2. Blogs
3. Ecommerce
4. Portfolios
5. Event websites
6. Online forums
7. Personal Websites (blogs but more interactive)
8. Membership Websites
9. Non-Profit Websites
10. Informational Websites

During this lecture Mr. Mike briefed to us some important things as :

A Web page: A document with text, images, sound and video that is accessible from web on any device with an internet connection and a web browser

Web browser : A programme that gets you anywhere on the internet, from websites to your devices.

HTTP (Hypertext Transfer Protocol) : how information is transmitted on the web.

Website: A set of webpages stored or hosted on web servers. Designed for specific purposes. unique domain name.

The 3 Web Technologies HTML, CSS. & JAVASCRIPT

HTML: gives websites a proper structure, however lack aesthetic, controls the placement of the content, creates a structure, the fundamental building block of any website
CSS: is the answer to designers' request, how to make websites look good, allows website to create layouts, used to style the website, allow various screen sizes to make web pages responsive (where the website would translate it self to look similar on all devices), handles the look and feel
JAVASCRIPT: creating vr-like websites, no limit to the interaction, highly engaging, allow to do anything to websites, where interactivity are increase, handles the complex functions and features, programmatic codes that can enhance functionality

Then he moved to explaining the difference between Website vs Landing

Landing page: is built to drive a traffic for a marketing campaign goal sign-up process, straight to the face, content is usually very specific, simply to inform or get user to take the single action; like a pushy salesman, a single focus, sell something
Website: is more generic, like a receptionist, go there to search information, doesn’t push but holds lots of information

The 1st page of a website is also called a landing page (homepage)

Static vs Dynamic

Static websites: fixed number of pre-rendered web pages, hardcoded, fixed content and structure. Users see same content. Written entirely using HTML.
Dynamic websites: Generate pages in real-time. flexible customisable content structure. Controlled by CMS

Domain and Web Hosting

Domain: is a unique set of characters that identifies a specific website, it can be used in URLs to identify particular web pages; when we enter a domain name into web browser, it will then retrieve the website from the Domain Name Server (DNS)
Web hosting: stores/host webpages/websites' data (media, format, backups), site data is stored on a server, like cloud servers; servers are usually rented out from a web hosting provider, like a landlord, leasing out server space to renters, where web hosting company protects data and what not.

Frontend vs Backend vs Fullstack

Frontend: client-side of a website or application is the part that is built to interact with users directly, designing the look and feel, the experience.
Backend: server-side, where the logic and integration of coding, database, content management
Fullstack: client and server side, developers are all rounders a software expert, who is proficient in the frontend and backend

During this week Mr Mike asked us a small task as our first exercise, we have to choose 5 types of websites and explain why do you think they are such websites. The 5 types of websites I choose are eCommerce Websites, Portfolios, Event Websites, Nonprofit Websites and blogs.

Event Websites : Is a cost-free digital advertisement for upcoming event include event information such as contact, terms and condition & location it also drive event registration main purpose: promoting event, information centralisation (provides one-stop access to faqs, infos, enquiries, updates) Eg:https://www.viperchallenge.com/
Nonprofit Websites : To convince people to support their organisation Establish good brand image and showcase their work and success stories. Build a community and connect like-minded people . Include information, how to help, social media links, contact, testimonials, blog Example: https://www.worldwildlife.org
Blogs : Blogs allows people to share and communicate their thoughts, experience with the world, it can either be an online self-journal or informational like food blogs that offers various recipes. What distinguishes a blog is that it is frequently updated and encourages reader's engagement, giving them a voice. These websites often has a personal touch and introspection to its content often on the topics of one's experience or opinion. Purpose: sharing and communication of an experience, opinion, or information Example: https://food52.com/recipes
E-commerce Websites : Allows people to buy and sell goods, digital products or services online. Includes a list of products or services and also online transactions Purpose: enables businesses to function online Example: Amazon.com
Portfolios: Portfolios are websites where people showcase their works and share information about what they do, it is a way for people to reach out on the global scale, like an extension of a resume. The key features would a clear communication of the skills or service that can provide, followed by showcasing their previous works, as well as testimonies of previous clients. Lastly, it is also important to provide clear contact details. Purpose: showcase of works, allow easy viewing of your works for clients, land more jobs, provide greater exposure, self-promotion Example: Behance.net

Week 2

This week, we learned about web standards and HTML scripting. Then we were assigned to do an exercise about HTML scripting. In this exercise, we had to create a webpage with the information provided by the lecturer.
Web standards were introduced to keep the web free and accessible to all (abled and disabled alike) and to help make developments and maintenance easier basically the purpose of Web Standards is to keep the web free, accessible to all, make coding simple (no need for multiple web): reduces development and maintenance time, makes the web accessible, allowing backward compatibility (use older ver), maintain better SEO (Search Engine Optimisation) & creates a pool of common knowledge. These standards are decided by Standards Development Organisations or SDO: Internet Engineering Task Force (IETF), World Wide Web Consortium (W3C), WHATWG, ECMA TC39, Web Standards Project (WaSP), all of these organisations collaborating to create web standards.

HTML Scripting (Hyper-Text Markup Language) : is used to design web pages using markup language.

hypertext: defines the link between the web pages
markup: language is used to define the text document within tag which defines the structure of web pages
internet: is the networking infrastructure that connects devices together
world wide web: is a way of accessing information through the medium of the internet.

So , On week 2, we were taught on how to write html using w3school.com where we can write and run the html back to back so we can see the progress very easily. We were taught the basics of html such as structuring and formatting text and inserting images as well, We were given a a word file with an article on the popular game "about us" with headers, paragraphs, bullet lists and images and URLs to be included.

I completed the HTML and copied it to a TextEdit file and exported the file as AmongUs.html. I opened the file in Chrome and it worked perfectly.

Week 3

This week, we learned about divisions, division tag is known as div tag. It is used in HTML to create content divisions on a webpage like text, headers, footer, navigation bars and more.

Mr. Ahmad gave us some tipis regarding HTML:

Don't forget to close the tag: <head></head>
2. Proper Page Structure: only one pair of <head></head> and <body></body> for every web page; must reside within the <body></body> section
Folder Structure: must be name index.html (for the first one), recommended no space in filename, each supported files: images, CSS, and JavaScript needs to be in its own folder
Code Structure: if image folder name is images, then the filename in html code must put folder name first, slash, then the actual filename (file and folder name is capital sensitive, if file is big letter case then html should also be big letter case); on link if linking to other website put full path of the website starting from http; https=secure/encrypted

Web image files

JPEG: commonly used in photographs / Not good for graphics / Non transparent
PNG: Good compression / good for graphics / can be transparent
GIF: Low quality / common for animations

Website layouts:

Most websites have multiple columns organised like a magazine
<div> or <table> are used to create multiple columns
CSS is used to position elements or to create the colourful look
Responsive web design is an approach aimed to work on all devices.

Division:

<div> tag defines division or section in HTML document
<div> is used to group block-elements to format them without CSS
<div> element is often used with CSS to layout webpage

What is <div>?

It is a "pure" container used to group content so it can be easily styles using the <class> or <id> attributes, marking a section of a HTML document.

<div>: stands for division, it is the section of a HTML document used to group block elements to format them with CSS, to layout a web page
<id>: stands for identification, it is a unique identification name that you give to elements to help select in CSS, but it should be unique meaning two containers should not have the same <id>
<class>: an attribute often used to point to a class name in a style sheet

<div> usually cannot be seen, the only thing it does is start a new line, it is mainly for one's own convenience to help divide document into sections that would make sense semantically, organise where will each part of layout be.

Week 4

On this week's lecture, Mr.Tarmizi talks in depth about CSS. CSS is one of the 3 technologies that are used to create web pages along with HTML and JavaScript.

CSS is reusable
changes stylesheet to change designs of multiple pages
easier to maintain
cleaner HTML code
Consistent look
Separate content to form
CSS allows to add style to web page (colour, size, positioning...)

PRACTICAL

Among Us Exercise Submission

Figure 1: Among Us PDF

Figure 2: Among Us Style

Figure 3 Among Us Coding

REFLECTION

It was an interesting Exercise , I have learned a lot I have never thought that I can even understand coding , for me at the begging it was very complicated and not easy but after the 5 weeks , Mr Ahmed really made everything so simple and he kept recabing and ask many times if anyone doesn't still understand or anyone still struggling and when I told him that I'm facing some problems he made a quick consultation and explained to me everything .
I always Consider HTML is scary and only for genius people xD but after Mr Ahmad's explanations during the lectures it was fairly simple and easy .The structure and rules were quite straight-forward and I was happy with my progress.

Search This Blog

Mariam Ayman (347638)