App Design II / EXERCISES
05.04.2023 - 5.07.2023 (Week 1-Week 14)
Esther Vanessa/0350751/Bachelors of Design (Hon.) in Creative Media
Application Design II
Exercises
JUMP LINKS
Week 11
EXERCISE 1 (Week 1)
For our first introduction to the module, we were given an overall review of
it + going through the MIB. This module is a continuation from Sem 3's App
Design which my project and progress can be read
here. Once again, in this class we will be learning to code again (HTML, CSS, and
JScript) and would have to make the wireframe of the previous project this
time in code so that it is an actual app we can use.
During the first class, Mr Razif introduced us to ChatGPT. Which I was not
familiar with as I have only ever heard of it but never tried it. Turns out it
was a powerful tool that can help us create a sort of 'template' for any kind
of website we'd like to try. For the first exercise, I followed Sir Razif and
utilized ChatGPT to create a portfolio website that includes 4 sections + a
contact form, in which the website would also have smooth scrolling and jump
link. In the beginning my ChatGPT did not work so I resorted to using NotionAI
which is another AI tool.
However, when I tried to apply the code from Notion + the contact form that
was supposed to be in the website, the contact form itself did not really
work. So I resorted back to ChatGPT, this time trying in microsoft edge
browser
(did not screenshot bcs at the time did not know i was supposed to document
it for our blogpost but here's the snippet of the code).
Result is, the code from chatGPT did not work until I tried to repeat the
command again and again until it finally did. And it looked nice. However, I
added a little bit of touch here and there. Such as looking for suitable color
palette, background image, and added a custom font from google.
For my supposed portfolio pictures, I took pokemon pictures from Google. This
part of the page, you can hover over the pictures and click them to redirect
to an 'actual' website but for this is just an exercise I put an example link.
This is also a code i excerpt from chatGPT using a different command (sort of
like mix and match).
Here is the final look of the portfolio website.
All in all I was reminded of the previous Interactive Design class I took in
semester 2
(safe to say i already forgot a bunch of it so using ChatGPT awakened my so
dormant memories). In the future, although ChatGPT is fun and makes it seem like cheating I
was hoping I could actually code from scratch and would use the AI just for
supplementary help.
I then uploaded the site to netlify, to access it click
here.
EXERCISE 2 (Week 2)
For our second exercise, we were tasked to recreate the same layout as the
sample Mr Razif shown us.
Recreate this in html, by the way.
Although I panicked a little bit but I have to say I got through it. The
process went a little bit like this.
First I added all the necessary links for the fonts, downloaded the assets
(pictures).
Next, I started breaking down the sections from the whole picture. From what I
understood, there's at least 4 big sections, 1st is the navigation above,
second is the *hero* section, then the new releases section, then finally the
songs section.
For the navigation, I had quite some time to think around but ChatGPT pulled
through, I used the table method it suggested and afterwards made some
adjustment, especially to the icon sizing that was a little bit off.
Here's the code snippet.
%20-%20Visual%20Studio%20Code%2013_04_2023%2000_50_15.png)
Second is the hero section. This part I had an experience working with so it
was not really to hard. For this I break down the section again to 3
section/container or parts. I just had a rather hard time arranging the play
button but it worked out in the end.
Here's the code snippet.
%20-%20Visual%20Studio%20Code%2013_04_2023%2001_11_30.png)
Third section is rather easier. I just used the <p></p> tag for
this. Inserted the picture (rather than actually using CSS, that'd take a while) and customized the positioning, font color, font weight, etc.
Here's the code snippet.
%20-%20Visual%20Studio%20Code%2013_04_2023%2001_11_37.png)
%20-%20Visual%20Studio%20Code%2013_04_2023%2001_12_55.png)
This part I also added another div to create the black fade (see figure for
reference). This one took a while but I eventually played the numbers around
until it worked. I used the similar method for the second shadow at the end of
the page.
Here's the code snippet.
%20-%20Visual%20Studio%20Code%2013_04_2023%2001_11_40.png)
%20-%20Visual%20Studio%20Code%2013_04_2023%2001_13_01.png)
Lastly, I just had to make two containers in grid style (thanks again, chatGPT).
Here's the code snippet.
%20-%20Visual%20Studio%20Code%2013_04_2023%2001_11_48.png)
%20-%20Visual%20Studio%20Code%2013_04_2023%2001_13_52.png)
To access the final file, click
here. Afterwards, (if you are not using your phone), do open the inspect
mode and set the size of the window to iPhone 12 Pro.
EXERCISE 3 (Week 4)
This week's exercise was to introduce us to javascript in a way. We were
introduced to several elements and properties to JS. First thing we tried
to do is changing "Mangsa" to another Band Name if we click on it. To do
this, we first had to add an id to the text Mangsa. Afterwards we need to
create a <script></script> tag. Here is the section we should
add our JScript to. For this specific task, we need to add the element
function and also the script getElementId (because we want to link the
two). then beside the id line, we want to add an onClick command to
instruct the code to run when we click it.
See above for the marked line of script that allows us to change the text
from Mangsa to Green Day - Dookie.
Next, we want the background color of the box to change when we click.
This uses the same method used previously, put an id for the specific
element we want to change, add an onclick command, then use the function
and scripting to change it.
Next, what if we want it to switch back to black after clicking again?
This we had to use counter and if-s. To make it simple, there's two
condition we want to create, first is to change and then to change it
back. we create counter 0 for the first to change, then 1 for it to change
again. See the marked lines below to understand more.
Lastly, we were asked to create a side panel that can open and closes
(this is useful for hamburger menus in phones/tablets. To do this, you
need to first turn the hamburger icon into a button by adding an onclick
command and a div to create the actual side panel (line 14 and 19).
Then on the scripting you create a function that lets you style the side
panel to block and no display (depends on the click). See the marked lines
below.
Then you style the class sidepanel on CSS.
This will allow you to open and close the side panel accordingly.
.gif)
EXERCISE 4 (Week 5)
Introduced to GSAP for the animations.
Firstly, add the script source.
Then create an id and use the tween animation script.
Add ease to smooth things out. Then also add more ids and try to animate
the other items too.
This will lead to this result.
For the side panel, we use the same method but we had to change the CSS
first. positioning it in -390px.
This will allow you to have this kind animation.
.gif)
Do not forget to change the CSS of the logo screen and main screen.
It would lead to this result.
.gif)
EXERCISE 5 (Week 6)
Before anything, we fixed the animation in the main page that got cut when we first showed the first logo animation. To do that, we add a function to know when to play the animation.
Then sir introduced us to timeline. Which basically does the same thing, putting it in a function but it allows you to pause and play the animation itself.
But if we put it like this, the animation will show one by one without using delays in the coding.
This would also allow us to do playback reverse, etc. This we can apply when opening the menu button.
From there, we can utilize the same reverse animation to move on to the next page. First we make the content for the next page (html and css), add the function to reverse the animation, add that function to onclick when clicking the account button. Afterwards, add another function to load page 2 upon completing the reverse animation that allows us to display none the first page and show the second page.
EXERCISE 6 (WEEK 7)
capex
EXERCISE 7 (WEEK 11)
Create a logo and export as svg - take the code and put it in a new html text file. Try to animate it using gsap.from and the id.
added -transform origin
REFLECTION
Week 1 :
Week 1's exercise is relatively easy after you get the hang of it. I did not
do much in the first week other than using chatGPT (which was new to me) but
afterwards it refreshes the loose memory I had from 2 semesters ago of
coding.
Week 2 :
Week 2's exercise made me lose my mind a little bit. Although the previous
exercise refreshed my memories, I have to say I still forget a handful of
them, including not knowing when to start. Abigail helped me a lot by
repeatedly saying just use ChatGPT to get inspired or to know where to start
in the coding itself. I have to remind myself to do that more often; utilizing
what's on the internet. W3School also helped me a lot especially in the box
shadow part. One thing that icks me a little bit is how the play button is
placed not too centered and I can't really figure out how to fix just that
tiny bit of pixel.
Week 4 :
Fun stuff! Javascript is a bit difficult, I'd say far more difficult than html
or css itself but when it works, it sure is satisfying. I love that I got
introduced to it by watching Crash Course's video like a night ago so I did
not have a lot of confusion when working on the exercise the next day.
Week 5 :
Another fun class! I realized the Javascript is not that difficult so long as
sir Razif told us how to. ALWAYS REMEMBER TO CHECK YOUR SPELLINGS, happens way
too often and always got the best of us. I especially like the rather simple
animation we can do, it gives a lot of life to the actual "app".
Comments
Post a Comment