Interactive Design Exercise

September 04, 2021

Interactive Design Exercise

24.08.2021 -14.08.2021 (Week 1-Week 4)

Koh Han Rong / 03444410
Interactive Design / Bachelor of Design (Hons) in Creative media
Exercises

Lectures:

Week 1:

In the first week of Interactive Design class, we were brief about this subject, as well as what we will learn from it. He also gave us an overview of our projects and the software we'll need for this subject. After that, we'll have our first lecture on the web and how it operates.

Webpage

-A document with text, images, sound, and video that is accessible on the web from any device that is connected to the internet via a web browser.

Web Browser

-A programme that gets you to anywhere on the internet, retrieving information from other websites and presents it on our devices. The information is transferred to us using the Hypertext Transfer Protocol (HTTP), which defines how the text, images, video and sound is transmitted on the web.

Website

-A website is a set of web pages that are stored or hosted on web servers. Websites are designed for specific purposes such as e-commerce, portfolio, branding etc. and have domain names to identify them.

Basically, the Website was made with 3 technologies such as HTML, CSS and Javascript.

HTML- provides structure and meaning to the content.

CSS-to style the website with layout, colours, fonts etc.
Javascript- used to create dynamic and highly interactive websites. It is a programming language.

Static website vs Dynamic website

Figure1.1 comparison between static and dynamic website

Domain and web hosting

-Domains, URLs and Address

The Domain Name is a unique set of characters that identifies a specific website, it can be used in URLs to identify particular Web pages. A Domain Name has the same relationship to a website as a street address to a house or a name to a person. When we enter a domain name into web browser, the browser will access a Domain Name Server (DNS) to find the location of the matching website on the internet, it will retrieve the website and display it.

-Hosting and servers

Web hosting is where we store (or host) our site’s data: media, formatting, backups, etc. Site data is stored on a server, including cloud servers and our customers access those servers directly when they visit our site. Servers are pretty complex hardware, so most people rent server space from a web hosting provider. We can think of a web hosting company as a landlord, leasing out server space to various renters, but also maintaining that space like how landlords make sure their tenants have water and electricity.

Frontend development

-The frontend of a website or application is the part that is built to interact with users directly. Frontend creation involves CSS, HTML and JavaScript.

Backend development

-Backend development addresses server-side web application logic and integration. Backend developers write code to help a database and application communicate.

Fullstack development

- Fullstack development includes both Frontend and Backend design and programming.

Week 2: Web Standards and HTML

In week 2 we learned about web standards, so what are web standards? We can think of the World Wide Web as an information ecosystem where content created by anyone is fed into the web, passes through a browser to allow others to access that information. What if there were no formal rules on how the content should be created, nor any requirements for how a browser should serve up that information to the people that are requesting it? Likened to a children’s toy we would have to sort the different shaped blocks into the correct holes. The different types of browsers are the different shaped holes and the content or websites, are the brightly colored blocks.

Content creators would have to make a website to fit the specific browser. For example, we would need to create a ‘Chrome-shaped block’ to be able to pass through the Chrome hole. This would mean that our ‘Chrome-shaped block’ would only fit through that one Chrome hole and we would need to

rebuild our content into other shapes for it to be viewed using any of the other browsers. Web Developers in the 90s would often have to make three or four version websites so that it would be compatible with all the browsers at that time. And when these browsers introduce new features, the development needs to be repeated.

Initially the web content was largely text-based, so a website block would fit through the majority of the holes. As newer browsers developed, new features became more and more difficult to make a block that would pass through each of the browser holes. This also means that a block that could once fit didn’t fit the same hole any longer, eliminating reverse compatibility. Every time a new feature or version was

released, there is a chance that our website would no longer work with that browser.

Why Web Standards?

• Keeping the web free and accessible to all

• Helping make source code simpler; reducing development and maintenance time

• Making the web a more accessible place

• Allowing for backward compatibility and validation

• Helping maintain better SEO (Search Engine Optimization)

• Creating a pool of common knowledge

Standards are decided by “Standards Development

Organisations” or SDOs:

• Internet Engineering Task Force (IETF)

• World Wide Web Consortium (W3C)

• WHATWG

• ECMA TC39

• Web Standards Project (WaSP)

Week 3: HTML

Proper Page Structure

• Only one pair of <head></head> and

<body></body> for every web page.

• All contents must reside within

<body></body> section.

Folder Structure

• First web page must be rename as

index.html

• Recommended to have no space in

the filename.

• Each supported file (images, CSS, and

javascript files) 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.

• On link, if linking to other website please

type full path of the website starting from

https:// or http://

JPEG

Joint Photographic Experts Group

• Image formats commonly used, widely used in the world

of photography

• It has a compression algorithm that reduces the size of

an image, on average, 1/10 of the original size.

• In web design, JPEG is good for photographs, but it is

not good for graphics (lines, typography, drawings, etc...)

because it tends to granulate the edges.

• Finally, JPEG is an image that lives on a level, so it will

always have a white background that could create the

problems that are seen above when we talk about

transparent and non-transparent images.

PNG

Portable Network Graphic

• This image format is based on the LSW compression

algorithm which, unlike JPEG compression, works

without losing the initial information.

• Therefore, a PNG file compresses the image without

losing the details of the original, which may not be

displayed on the screen, but which can certainly be

recovered by graphically editing the file.

• For web design, the most interesting feature of PNG is

that it supports the transparent background layer, so

you can get photos with transparent background thanks

to this format

GIF

Graphical Interchange Format

• Very low quality image format that allows you to store 8

bits per pixel for a total of 256 colors per image

compared to 16 million JPEGs that reach the limits of

what the human eye can see.

• The GIF was born as a specific format for the web in the

80s. Therefore, taking into account the needs related to

the band, it made his work perfectly given the minimum

weight.

• The unique ability of GIF is that its allows you to store

multiple images in sequence by creating small

animations that are often used in social networks.

Website layout

Using the <div> or <table> components, many columns may be formed. To position components and generate backgrounds, CSS (Cascading Style Sheets) is utilized. CSS and div> layouts may be used to make adaptable layouts that operate on a variety of screen sizes. Responsive web design is a method of creating websites that are optimized for viewing on a variety of devices (navigation, easy to read with minimal resizing, panning, and scrolling). * Hints: By selecting "see page source," we may quickly learn about a website's coding.