Interactive Design

August 23rd, 2021 - September 13th, 2021 (Week 1 - Week 4)
Rusydina Fazlin Athirah Binti Fauzi (0344000)
Interactive Design
Week 1 [August 27th, 2021]
Exercise 1 / HTML Document Development & HTML, CSS Document Development, CSS Layout Model

INSTRUCTIONS

Lectures

August 27th, 2021 (Week 1)

In the first week of Interactive Design class, Mr. Mike gave a brief introduction to what this subject has to offer and what to expect throughout the whole semester.

Our first lecture was given by Mr. Mike was all about websites and how it was made, he shared simple slides for our better understanding with a few explanations by Mr. Mike himself.

Lecture 1 slides (The web and how it works):

After the lecture, Mr. Mike assigned the class on working on a small short task to start out our first exercise in the second week, where we choose 5 types of popular websites and explain what we think of the websites on their uniqueness, functionality, and contents held in it.

In-class task:

HTML Document development & HTML

September 3rd, 2021 (week 2)

In the second week of interactive design class, Mr. Martin guided the class along with our second lecture on how to build up a website through coding. In the slides provided Mr. Martin explained the necessaries in what makes up a website and how the contents and written up in them.

Lecture 2 slides (Web Standards and HTML):

Interactive Design - <div> implementation

September 10th, 2021 (week 3)

Third of the week into interactive design class, Mr. Tarmizi guided the class along with a recap on previous lectures held by Mr. Martin and brief recaps and tips about websites, and HTML. In the slides provided Mr. Tarmizi explained the necessaries in what needed to be included in <div> script lines and how the contents are written up in them.

Lecture 3 slides (Web Standards and HTML):

Interactive Design - Introduction to CSS

September 17th, 2021 (week 4)

This week Mr. Tarmizi thought us how to prepare ourselves to use CSS, it helps make the website much more appealing and organized. Mr. Tarmizi first gave a tutorial on how to work out the coding lines when wanting to style our websites, that customizing the background, text colors, and changing fonts to google fonts.

Lecture 4 slides (Introduction of Cascading Style Sheets):

Interactive Design - Introduction of Adobe Dreamweaver

September 24th, 2021 (week 5)

This week Mr. Tarmizi, introduced the class to Dreamweaver, it's a program where coding has its convince added to it. Other than that it was the start of our first project, Mr. Tarmizi demonstrated how to function our way through Dreamweaver before starting our first project.

In addition, we had to design a landing page with the desired content we want to insert into it as the start of our first project.

Lecture 5 slides (Introduction of Adobe Dreamweaver):

Interactive Design - Website Layout and Structure

October 1st, 2021 (week 6)

This week, Mr. Tarmizi guided the class with a lecture to help us prepare for our first project, He explained to the class all about there is to know when making a good website. One that is appealing and making sure it has the interest that we want to put out for the viewer to see.

Lecture 6 slides (Website Layout and Structure):

Exercises

HTML Document development & HTML Exercise

September 3rd, 2021 (Week 2)

Later after the explanation, Mr. Mike has us try out a little bit of coding to get started on practicing and playing around with attributes inside a coding script to build our websites, as seen in my POV below:

Figure 1.1 - Coding for the first time, September 3rd, 2021

Since it was my first time coding, it was surprisingly not that bad and quite quick for me to get the hang of things. (Website used was a simulation called 'W3schools' for an easier in my opinion that Mr. Mike gave the class to practice in.)

Coding try-out text I typed in:

<!DOCTYPE html>
<html>
<head>
<title>Black cattos</title>
</head>
<body>

<h1>Black Cats are not bad luck.</h1>
<p>
Somewhere down the line, black cats became a Halloween-favorite and a symbol of bad luck, as many people have come to believe that a black cat crossing your path is an omen of misfortune and even death!</p>

<p>Black cats have had a rough go of it. ... However, we have good news: black cats aren't unlucky at all. In fact, in a lot of places and cultures, <b>they're actually a symbol of good luck and prosperity.</b></p>

<p><b>Why cats aren't bad luck:</b></p>

<ul>
<li>they're floof</li>
<li>they have big eyes- adorable</li>
<li>they just aren't</li>
</ul>

<p><b>Reasons to get a black cat UwU/:</b></p>

<ol>
<li>c'mon maynnn, they're cool</li>
<li>makes ya feel like you your own little witch >:D</li>
<li>give a little black kitty a loving home</li>
</ol>

<p>very cool facts about black cattos ---> <a href="https://www.thesprucepets.com/facts-about-black-cats-554102">Boop Me!</a></p>

<img src="http://pa1.narvii.com/7703/1e1115442e06d4a72110bbea291c6333975c9ecbr1-180-180_00.gif" alt="black kitty" style="width:800px;height:800px;">

</body>
</html>

Pdf Version:

Later then, after getting the hang of things when it comes to building up the basics in website and HTML, Mr. Martin had us begin our second exercise of the week. Where a body of text and a few heading are provided from a document to be put into a website.

Texts that are meant to be inserted into a website:

Figure 1.2 - The beginning/making of exercise 2, September 3rd, 2021

Figure 1.3 - success, September 3rd, 2021

So with the practices, this concludes today's exercise in understanding and trying out HTML and building up a website.

Coding try-out text I typed in:

<!DOCTYPE html>
<html>
<head>
<title>‘Among Us’, the Most Adorable Little Game of Murder and Treachery</title>
</head>
<body>

<ul>
<li>‘Among Us’, the Most Adorable Little Game of Murder and Treachery</li>
<li>Mind Games</li>
<li>A Simple Premise</li>
<li>Explosive Popularity</li>
<li>What’s Next?</li>
</ul>

<h1>‘Among Us’ A Fad or Dominance?</h1>

<img src="https://cdn.cloudflare.steamstatic.com/steam/apps/945360/capsule_616x353.jpg?t=1625742109" alt="among us title">

<p>If you haven’t been plugged into the ever-shifting trends of multiplayer gaming, you may be wondering what all this Among Us ruckus is about. It’s become one of the most-played online games in the world, seemingly overnight which is all the more remarkable, since it actually launched more than two years ago. Among Us is basically a video game version of The Thing, with up to nine players working to find one imposter who’s killing the rest of them. If you’ve ever played the party game Mafia or Werewolf, it has a lot of the same vibes. Among Us has seen a quick rise in popularity due to a combination of multiple factors. It’s a unique game with an interesting asymmetrical multiplayer, it’s easy to learn thanks to a simple premise, and it’s available for (almost) free on a variety of popular platforms, including PC and mobile. But most of all, it’s a game that explores new territory: communication and cooperation versus sabotage and deception.</p>

<h2>‘Among Us’, the Most Adorable Little Game of Murder and Treachery</h2>

<p>In Among Us, 10 crew members of a spaceship attempt to fix its various issues and stabilize it. They’re basically one of those guys running around behind Scotty in the Enterprise’s engineering department. Fixing the issues are a series of basic mini-games—rewiring a panel, sliding an access key card, all simple stuff. Fix enough of the issues, and the ship is stabilized. You win. Here’s where the twist comes in. One player is the imposter, an alien monster disguised as a crew member. The imposter brutally murders the crew one by one (in a stylized, adorable cartoon way), and sabotages the ship’s systems in order to set back repairs.</p>

<img src="https://www.icegif.com/wp-content/uploads/among-us-memes-icegif.gif" alt="among us murder scene">

<p>5 of the <b>worst</b> things to do as a Crewmate are:</p>

<ol>
<li>Not Properly Utilizing Emergency Meetings</li>
<li>Not Minding The Vents</li>
<li>Mindlessly Voting An Impostor</li>
<li>Waiting For Someone Else To Fix Sabotage</li>
<li>Not Knowing What Common Tasks And Visual Tasks Are</li>
</ol>

<p>Only the imposter has any offensive capability—the rest of the crew is helpless. But that doesn’t mean that they don’t have options. At any time, members of the crew can call an emergency meeting.</p>

<img src="https://c.tenor.com/XOyzmsjjr2kAAAAC/emergency-meeting-among-us.gif" alt="among us emergency meeting">

<p>When this happens, all the players can communicate via text and try to figure out who the imposter is. The players vote after every meeting, and the one who gets the most votes is ejected out the airlock. If the player selected actually was the imposter, the crew wins. If it wasn’t … well, they just killed an innocent player.</p>

<img src="https://images.squarespace-cdn.com/content/v1/5a67750480bd5e2d33afa823/1602006252291-3GBYP4U70TZQSWYGTEHR/ezgif-7-081bb68302ea.gif" alt="among us eject scene">

<h2>Mind Games</h2>

<p>Here’s where the really compelling part comes in. Naturally, the imposter player wants to stick around, murdering the crew until there’s only one left and they win. But the rest of the crew doesn’t know which of them is the imposter. So, some creative lying and misdirection are essential for an imposter player to succeed. Imposters often claim to have seen the “real” imposter or suspicious behavior like players crawling through the ventilation (which only the imposter can do). If the imposter can successfully shift the blame to someone else, getting them ejected or sowing enough confusion that no one gets enough votes to be ejected, the game continues.</p>

<img src="https://i.pinimg.com/originals/14/f4/85/14f485c95f8b62e50e374fa3ddb7ffce.gif" alt="among us eject">

<p>This is what’s so appealing about Among Us, its unique hook pitting a group’s teamwork against the deception and manipulation of a human (monster) antagonist. It’s a dynamic that really hasn’t been explored in a popular video game before … and which you can expect to see imitated a lot over the next few years.</p>

<h2>A Simple Premise</h2>

<p>Among Us is incredibly simple compared to other super-popular games like Fortnite. The graphics are entirely hand-drawn 2D cartoons, you can control your crewmate or imposter character with only a few taps (or the mouse on PC), and even the “repair” mini-games are easy to learn in a few seconds. Players that get “murdered” by the imposter can still help their team, sticking around as ghosts that can complete tasks, but are unable to speak during meetings and identify their murderers.</p>

<img src="https://thumbs.gfycat.com/AgitatedOrganicGossamerwingedbutterfly-size_restricted.gif" alt="among us doing task">

<p>The game is played with a few variables. Though most people play on the default spaceship level, the Skeld, there are two other maps, a headquarters facility and a polar base inspired by The Thing. You can also set up the game with more than one imposter player. Online multiplayer is the most popular option, with semi-random players, but you can also set up a private game either online or via a local network.</p>

<img src="https://i.imgur.com/cyMflfM.jpeg" alt="among us skeld map" style="width:550px;height:350px;">

<h2>Explosive Popularity</h2>

<p>Among Us was first released in June of 2018, a Unity engine game made by a tiny team of just three developers. It’s available as a free mobile game on iOS and Android, and a $5 game on the PC. It had a bit of notoriety and got popular enough for the developers to start working on a sequel. But it wasn’t until a couple of years later that the game started to take off. The key factor: Twitch streamers. The popular live streaming platform saw a boom in players of Among Us, who were fascinated by the social dynamics of the accusation and ejection phase. More streamers hopped on, driving up more and more views.</p>

<img src="https://pbs.twimg.com/media/EpjGp4vXIAA2JFg.jpg" alt="among us twicth streams" style="width:550px;height:350px;">

</p>Among Us has grown beyond its initial Twitch audience, appealing especially to younger players. Its simple doodle characters and brutal killing animations have become memes in and of themselves, and it’s now spreading into general popular culture. A true cultural cornerstone happened earlier this month, when a U.S. congresswoman played Among Us on <a href="https://www.twitch.tv/directory/game/Among%20Us">Twitch</a> to encourage voter registration for the 2020 election.</p>

<img src="https://i.redd.it/5r02lmpiucu51.gif" alt="Alexandria Ocasia-Cortez among us">

<h2>What’s Next?</h2>

<p>While the small developer team InnerSloth had intended to create a more complex sequel to Among Us, the exploding popularity of the game has taxed its resources. It will be working on improving the current game for the time being, adding more robust account and friend support, new stages, and better accessibility for colorblind players. Perhaps most crucially, more servers will be added to keep up with demand.</p>

<img src="https://www.ciol.com/wp-content/uploads/2020/10/Innersloth.jpg" alt="among us inner sloth">

<p>Like Fortnite and Fall Guys, you can expect to see a lot of imitators for Among Us on PCs, consoles, and especially mobile phones in the near future. Be wary of these, the game has an extremely reasonable monetization setup with no pay-to-win features, which is rare for a mobile game. Others may not be so reserved. Among Us 2 is cancelled for the time being, but it seems unlikely that it’s been completely scrapped. Expect work on a sequel or follow-up of some kind to resume once the team can stabilize and streamline the current game … and perhaps when they stop seeing millions of concurrent players.</p>

<p>Among Us is downloadable <a href="https://play.google.com/store/apps/details?id=com.innersloth.spacemafia&hl=en&gl=US">here</a> from Google Play and <a href="https://apps.apple.com/us/app/among-us/id1351168404">here</a> for your iPhone and iPad.</p>

</body>
</html>

Later then, a small consultation from Mr. Martin was held, ending off our class for interactive design for the second week.

Pdf version submission:

Interactive Design - <div> implementation (<div> exercise)

September 10th, 2021 (Week 3)

Towards the end of the exercise, Mr. Tarmizi assigned the class to implement the respective attributes (<div>) into the text sample provided by Mr. Mike last week.

<!doctype html>

<html>

<head>

<title>‘Among Us’ A Fad or Dominance</title>

<style>

img {

max-height: 50vh;

max-width: 100%;

display: block;

margin: 0 auto;

}

body {

padding: 56px max(20%, 56px);

box-sizing: border-box;

}

</style>

</head>

<body>

<ul>

<li><a href='#among-us-the-most-adorable-little-game-of-murder-and-treachery'>‘Among Us’, the Most Adorable Little Game of Murder and Treachery</a></li>

<li><a href='#mind-games'>Mind Games</a></li>

<li><a href='#a-simple-premise'>A Simple Premise</a></li>

<li><a href='#explosive-popularity'>Explosive Popularity</a></li>

</ul>

</div>

‘Among Us’ A Fad or Dominance?

</h1>

<p>

If you haven’t been plugged into the ever-shifting trends of multiplayer gaming, you may be wondering what all this Among Us ruckus is about. It’s become one of the most-played online games in the world, seemingly overnight which is all the more remarkable, since it actually launched more than two years ago. Among Us is basically a video game version of The Thing, with up to nine players working to find one imposter who’s killing the rest of them. If you’ve ever played the party game Mafia or Werewolf, it has a lot of the same vibes. Among Us has seen a quick rise in popularity due to a combination of multiple factors. It’s a unique game with an interesting asymmetrical multiplayer, it’s easy to learn thanks to a simple premise, and it’s available for (almost) free on a variety of popular platforms, including PC and mobile. But most of all, it’s a game that explores new territory: communication and cooperation versus sabotage and deception.

</p>

‘Among Us’, the Most Adorable Little Game of Murder and Treachery

</h2>

<p>

In Among Us, 10 crew members of a spaceship attempt to fix its various issues and stabilize it. They’re basically one of those guys running around behind Scotty in the Enterprise’s engineering department. Fixing the issues are a series of basic mini-games—rewiring a panel, sliding an access key card, all simple stuff. Fix enough of the issues, and the ship is stabilized. You win. Here’s where the twist comes in. One player is the imposter, an alien monster disguised as a crew member. The imposter brutally murders the crew one by one (in a stylized, adorable cartoon way), and sabotages the ship’s systems in order to set back repairs.

</p>

<p>

</p>

<p>

5 of the worst things to do as a Crewmate are:

<ol>

<li>Not Properly Utilizing Emergency Meetings</li>

<li>Not Minding The Vents</li>

<li>Mindlessly Voting An Impostor</li>

<li>Waiting For Someone Else To Fix Sabotage</li>

<li>Not Knowing What Common Tasks And Visual Tasks Are</li>

</ol>

Only the imposter has any offensive capability—the rest of the crew is helpless. But that doesn’t mean that they don’t have options. At any time, members of the crew can call an emergency meeting.

</p>

<p>

</p>

<p>

When this happens, all the players can communicate via text and try to figure out who the imposter is. The players vote after every meeting, and the one who gets the most votes is ejected out the airlock. If the player selected actually was the imposter, the crew wins. If it wasn’t … well, they just killed an innocent player.

</p>

<p>

</p>

Mind Games

</h2>

<p>

Here’s where the really compelling part comes in. Naturally, the imposter player wants to stick around, murdering the crew until there’s only one left and they win. But the rest of the crew doesn’t know which of them is the imposter. So, some creative lying and misdirection are essential for an imposter player to succeed. Imposters often claim to have seen the “real” imposter or suspicious behavior like players crawling through the ventilation (which only the imposter can do). If the imposter can successfully shift the blame to someone else, getting them ejected or sowing enough confusion that no one gets enough votes to be ejected, the game continues.

</p>

<p>

</p>

<p>

This is what’s so appealing about Among Us, its unique hook pitting a group’s teamwork against the deception and manipulation of a human (monster) antagonist. It’s a dynamic that really hasn’t been explored in a popular video game before … and which you can expect to see imitated a lot over the next few years.

</p>

A Simple Premise

</h2>

<p>

Among Us is incredibly simple compared to other super-popular games like Fortnite. The graphics are entirely hand-drawn 2D cartoons, you can control your crewmate or imposter character with only a few taps (or the mouse on PC), and even the “repair” mini-games are easy to learn in a few seconds. Players that get “murdered” by the imposter can still help their team, sticking around as ghosts that can complete tasks, but unable to speak during meetings and identify their murderers.

</p>

<p>

</p>

<p>

The game is played with a few variables. Though most people play on the default spaceship level, the Skeld, there are two other maps, a headquarters facility and a polar base inspired by The Thing. You can also set up the game with more than one imposter player. Online multiplayer is the most popular option, with semi-random players, but you can also set up a private game either online or via a local network.

</p>

<p>

</p>

<h3 id='explosive-popularity'>Explosive Popularity</h3>

<p>

Among Us was first released in June of 2018, a Unity engine game made by a tiny team of just three developers. It’s available as a free mobile game on iOS and Android, and a $5 game on the PC. It had a bit of notoriety and got popular enough for the developers to start working on a sequel. But it wasn’t until a couple of years later that the game started to take off. The key factor: Twitch streamers. The popular live streaming platform saw a boom in players of Among Us, who were fascinated by the social dynamics of the accusation and ejection phase. More streamers hopped on, driving up more and more views.

</p>

<p>

</p>

<p>

Among Us has grown beyond its initial Twitch audience, appealing especially to younger players. Its simple doodle characters and brutal killing animations have become memes in and of themselves, and it’s now spreading into general popular culture. A true cultural cornerstone happened earlier this month, when a U.S. congresswoman played Among Us on <a href='https://www.twitch.tv/directory/game/Among%20Us'>Twitch</a> to encourage voter registration for the 2020 election.

</p>

<p>

</p>

What’s Next?

</h3>

<p>

While the small developer team InnerSloth had intended to create a more complex sequel to Among Us, the exploding popularity of the game has taxed its resources. It will be working on improving the current game for the time being, adding more robust account and friend support, new stages, and better accessibility for colorblind players. Perhaps most crucially, more servers will be added to keep up with demand.

</p>

<p>

</p>

<p>

Like Fortnite and Fall Guys, you can expect to see a lot of imitators for Among Us on PCs, consoles, and especially mobile phones in the near future. Be wary of these, the game has an extremely reasonable monetization setup with no pay-to-win features, which is rare for a mobile game. Others may not be so reserved. Among Us 2 is cancelled for the time being, but it seems unlikely that it’s been completely scrapped. Expect work on a sequel or follow-up of some kind to resume once the team can stabilize and streamline the current game … and perhaps when they stop seeing millions of concurrent players.

</p>

</div>

<p>

Among Us is downloadable <a href='https://play.google.com/store/apps/details?id=com.innersloth.spacemafia'>here</a> from Google Play and <a href='https://apps.apple.com/us/app/among-us/id1351168404'>here</a> for your iPhone and iPad.

</p>

</div>

</body>

</html>

Search This Blog

Athirah.blogspot

Interactive Design - Exercises

INSTRUCTIONS

Lectures

Lecture 1 slides (The web and how it works):

In-class task:

HTML Document development & HTML

Lecture 2 slides (Web Standards and HTML):

Interactive Design - <div> implementation

Lecture 3 slides (Web Standards and HTML):

Interactive Design - Introduction to CSS

September 17th, 2021 (week 4)

Lecture 4 slides (Introduction of Cascading Style Sheets):

Interactive Design - Introduction of Adobe Dreamweaver

September 24th, 2021 (week 5)

Interactive Design - Website Layout and Structure

Exercises

Interactive Design - <div> implementation (<div> exercise)

Introduction to CCS

Customizing font style and website color background exercise (Week 4)

Comments

Post a Comment

Popular posts from this blog

Typography - Task 1

Digital Photography and Imaging - Project 1

Industrial Training - Internship blogging experience