Interactive Design - Lectures and Exercises

27/8/2021 - 17/9/2021 / Week 1 - Week 4

Lui Hsiao Hui (Tressa) / 0342003
Interactive Design / Bachelor of Design (Hons) in Creative Media
Lectures and Exercises

LECTURES

WEEK 1 LECTURE

1: The web and how it works

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.

Single web page sites = Parallax sites / Landing page

Parallax - scrolling in/down. layers playing with depth and illusion, moving at different speeds and movement styles (radial etc).

Web browsers: A programme that gets you 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 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.

Fig. 1.1 Difference between HTML, CSS and JavaScript

Fig. 1.2 Web design with and without CSS

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.

Fig. 1.3 Website vs landing page

Home page: consists of other pages

Landing page: action driven, not there for info, built for 1 reason (no distractions, simply to inform)

CTA - call to action

2: Static and dynamic websites

Fig. 1.4 Static vs dynamic website

Static websites: Fixed number of pre-rendered web pages containing hardcoded, fixed content and structure.

Written entirely using HTML. Each web page is a separate document and there are no databases or external files that are drawn upon. The only way to edit is to go into each page and edit the HTML.

Dynamic website - Generate pages in real-time.

The flexibility of content and structure - customise what a user experiences based on their request or the browser they use.

Written using more complex code such as PHP or ASP and has a greater degree of functionality.

Controlled by a Content Management System (CMS) serves that holds all sorts of content.

Eg: Facebook, e-commerce websites (everytime u go in the page changes)

3: Domain and web hosting

Fig. 1.5 Domains, URLs and address

Web hosting: Store/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.

Hosting service: Pay monthly etc, how large, they will take care of ur website files.

4. Frontend vs backend vs fullstack

Frontend development: Built to interact with users directly. 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. Essentially, a backend developer handles what we don't see; they are in charge of the backend of a website, which includes servers, databases, and applications. Fullstack development: Both frontend and backend design and programming.

Fullstack development: Includes both Frontend and Backend design and programming.

WEEK 2 LECTURE

1. Web Standards

World Wide Web: An information ecosystem, a way of accessing information through the medium of the internet.

Before web standards, content creators would have to make a website to fit the specific browser. Web Developers in the 90s would often have to make 3 or 4 website versions so they would be compatible with all the browsers at that time. When these browsers introduce new features, the development needs to be repeated/redone.

The internet: A networking infrastructure that connects devices together.

Web Standards: Ensure that browser makers were encouraged to adhere to a standardised way of doing things, where cross-compatibility becomes easier for content makers without the need to build multiple versions of the same website.

- 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)

2. HTML Scripting

Fig. 2.1 HTML page structure

<DOCTYPE! html>: This is the document type declaration (not technically a tag). It declares a document as being an HTML document. The doctype declaration is not case-sensitive.

<html>: The HTML element is the base container for everything else on your webpage. Every other element you add will go inside of this one.

<head>: The head tag contains the “behind the scenes” elements for a webpage. Elements within the head aren’t visible on the front-end of a webpage. HTML elements used inside the <head> element include:

<style>

<title>

<base>

<meta>

<link>

<body>: The body element is where you will put all of the actual content of your website. If you were to leave it blank, you could still load the page, but you'd see nothing but a white screen.

<p>: Only the <p> element will actually show up as something you can see on the page. The others are what is often referred to as boilerplate code, meaning that they appear unchanged in just about every HTML document because your browser requires them.

Fig. 2.2 Headings

Fig. 2.3 Unordered lists

Fig. 2.4 Ordered lists

Fig. 2.5 Nesting

Text formatting elements

Bold: <b>

Italics: <i>

Underline: <u>

Links

<a href="https://university.taylors.edu.my/en.html">Click me</a>

<a href=" https://university.taylors.edu.my/en.html "target="_blank">TU Website</a>

Image

EXERCISES

WEEK 1

5 popular types of websites

During week 1, we were tasked to choose any 5 of these websites and explain why do we think they are such websites.

- Unique features that tell us what kind of websites they are.

- Explain their functions, contents they hold and show a popular example for each.

1. Business Websites

2. Blogs

3. eCommerce Websites

4. Portfolios

5. Event Websites

6. Online Forums

7. Personal Websites

8. Membership Websites

9. Nonprofit Websites

10. Informational Websites

Fig. 4.1 5 popular types of websites - PDF slides, Week 1 (27/8/2021)

WEEK 2

HTML Scripting

During week 2, we started learning the basics of HTML from Mr. Mike's lecture and with the help of the website W3Schools. For the first exercise we got to mess around using that website to see how the text appears, then we used notepad to create the actual HTML.

Fig. 4.2 HTML scripting exercise #1 "REVIVED" website - PDF, Week 2 (3/9/2021)

Decided to type out the lyrics to a song I liked. <pre> </pre> wasn't included in the lecture but after exploring W3Schools a bit I wanted to use it for some parts of the lyrics.

Fig. 4.3 HTML scripting exercise #2 "Among Us" website - PDF, Week 2 (3/9/2021)

For the second exercise, we were given an article on the game Among Us and we were to create a HTML following the format of the content given.

Fig. 4.4 HTML code for both exercises, Week 2 (3/9/2021)

WEEK 3

HTML Scripting - "div"

Fig. 4.5 "div" example by Mr. Tarmizi, Week 3 (10/9/2021)

In week 3, Mr. Tarmizi tasked us to add "div" into our Among Us HTML exercise we did in week 2. I followed accordingly to the example provided in class. Fig. 4.6 below is the updated code with the "div".

Fig. 4.6 HTML code for "Among Us" - PDF, Week 3 (11/9/2021)

WEEK 4

HTML - CSS

This week we started basic CSS coding and our task was to implement it into our Among Us HTML.

Fig. 4.7 HTML and CSS "Among Us" website - PDF, Week 5 (20/9/2021)

Fig. 4.8 HTML and CSS code for "Among Us" - PDF, Week 5 (20/9/2021)

FEEDBACK

Mr. Tarmizi's written feedback through email

Week 6: Overall your HTML and CSS codes look good; however, my only comment is your application of CSS is very limited to HTML tags, and it would be good if you could apply styling to the rest of the class and id selectors inside your HTML codes.

Lui Hsiao Hui (Tressa) 0342003

Search This Blog