Application Design II: Lectures + Exercises
25/9/24 - 23/10/24 // W1-W4
Mercy Chong HuiZiun // 0360929
Application Design II // BDCM
Lectures & Exercises
Instructions
Fig 1.0 Module Information Booklet
Lists
Lectures + Exercises
Reflections
Task 1
Task 2
Lectures + Exercises
W1: No class
W2: Revisiting Exercise (HTML, CSS)
In today's class, sir did a quick recap on the HTML/CSS elements in
coding and then proceeded to give us an in-class exercise to build a
website using HTML and CSS.
Fig 2.0 Website coding progress
Final look
Fig 2.1 Top website display
Fig 2.2 Featured releases display
Fig 2.3 Website footer
W3:DOM
Document Object Model
CSS- Changing the characteristics with HTML elements
JAVASCRIPT helps to change the behaviour of HTML and or CSS
without adding a new HTML/CSS code
Consistency
Simplicity
Error
Feedback (getting the notification status to be informed, feeling a
sense of closure/satisfaction that you bought the product)
Why is HTML DOM important in website development?
Common DOM methods
In-class activity
Creating a simple to-do list (adding Javascript elements)
Before we start to code in Dreamweaver, sir has explained or did a
recap on some of the HTML elements like 'id', 'class', 'card' etc on
what are the functions and also briefed us on today's topic which is
about DOM.
For the tutorial session, we started to follow through the HTML and
CSS codings with the lecturer in Dreamweaver.
Fig 2.4 JavaScript coding
Fig 2.5 To do list website (not done)
Solution: After multiple times of rechecking back the code with
lecturer's code and also my coursemate's code as well and still
can't solve the error, I asked Chat GPT on what's the issue and
found out that I have parenthesis error in one of the code
rows which requires me to remove the bracket. And by removing this
small bracket the list is finally appeared (even though there's
still an error in the code from the const element)
So in the new task box, you have to type in something in the box to
add task.
Fig 2.6 Finished To-do list on web
Once a task has inserted, you can either click the 'done' or 'delete' button at the side. Then you can create a new task above and repeat the process.
Fig 2.7 Done and Delete buttons
W5: Micro-interaction
At the start of the class, Sir briefed us on our next task which is
about Interaction Design & Planning (Task 2). He then gave us a
short briefing and proceeded with a tutorial on making simple
micro/macro animations in Figma using shapes like circles.
In-class exercises
Task To-do:
- Research on micro UI interactions to be applied into your app redesign project.
W6: GSAP tutorial
document.getElementbyId("profilePanel").style.display ="flex";
Error found
var t1 = gsap.timeline({onComplete:hidelogo});
After several tries trying to find that one error, turns out its the uppercase/lowercase letter issue in this line above (the hidelogo for this line I put it as 'hideLogo' before this :p)
This shows that we really need to carefully do coding and check thoroughly. Gladly there's the inspect tool in Chrome and you can check the error in the console section.
Tips from lecturer (when doing prototype designs in Figma)
- We should create the design components set first before doing the frames design so its more efficient for you when doing the prototype designs.
- It's better for you to create your own grid system in that one page/section in particular so that its more organized and save ur time to align each of the pages.
Reflections
