💧 Exercises
NG MEI YING (0340563)
Interactive Design
Exercise
INSTRUCTION
LECTURE NOTES
15/04/20 (W1): Function and Type of Websites
Today, Mr Shamsul started the first lecture about the introduction of the website as well as the type of websites to us after the modules and the tasks. After the lecturer, Mr Shamsul assigned a small research task for us to find out the main types of the websites by identifying the target user as well as the purposes in the time frame of 1 hour. The link of the google slide needed to be included in the comment section of google classroom for checking.
Fig 1.0 W1 LEC PDF: What is Website
Fig 1.1 Research Slides: Type of Websites.
FEEDBACK: Lecture said that everyone had done a good job in the research given.
22/04/20 (W2): The Web
The lecture today was about the deeper learning of the website as well as the component and elements that built up the websites nowadays. The most important thing about this lecture today was the HTML Codes & the Attributes. Below is some summary of the learning.
- Web standards for different devices
- Hardware & Software Issue
- World Wide Web Consortium (W3C) maintains the web standard globally
- Website is built using HTML & CSS
- Web VS Internet
2) How The Web Work
- Key in Domain Name / Web Address
- Browser connects to the Domain Name System (DNS) / IP Address
- Website is search by "keywords"
- Computer servers are continuously operated in aair-conditioned server room that functioned as a data centre.
3) Structure of Web Page
- Understanding Web Structure
- Sandwich Menu and Pages
- The headline, Subheading, Body & Images
- Helps to create visual hierarchy for information
- HTML Elements with Tags
Fig 1.2 W2 LEC PDF: The Website.
29/04/20 (W3): Insert Image On The Web
Today, Mr Shamsul shared a lecture about the image on the web. Our lecturer also showed us how to save an image into gif format by using photoshop. Adobe Dreamweaver was introduced to us as a tool for creating the online website, it was also known as the HTML Editor that we can edit the code at the same time to preview the website.
- Image HTML: < img src ..... > (alt, title, width, height = can be added into the code)
- ID Attribute & Class Attribute (can only see the changes after CSS added)
- Block Element: <h1>, <p>, <ul>, <li>
- Inline Element: <b> / <strong>, <i> / <em>, <a>, <img>
Fig 1.3 W3 LEC PDF: Insert Image On Website
06/05/20 (W4): Cascading Style Sheet CSS
Today, Mr Shamsul shared a lecture about the CSS. CSS create rules that specify how the content element (HTML scripts/code) should appear. HTML scripts/code acts as a basic skeleton of the web, CSS acts like the make-up/styling for the web page.
About this topic
- External CSS: < link... >
- Internal CSS: < style type = "text css" >
Fig 1.4 W4 LEC PDF: Cascading Style Sheet CSS
13/05/20 (W5) : CSS Box Model
Today, Mr Shamsul shared a lecture about the CSS box model.
Watch Lecture:
20/05/20 (W6): No Lecture.
27/05/20 (W7): No Lecture.
03/06/20 (W8): Responsive Web Design (Bootstrap)
CSS Revision Source:
EXERCISE
22/04/20 (W2): HTML elements & tags
After the lecture, Mr Shamsul assigned us one simple exercise aiming to consolidate the knowledge of the HTML elements as well as the attributes. This exercise was about to create a rough and simple HTML Document describing ourselves with a meaningful and exciting content that was worth reading by Lecturers.HTML Document: Self Description
- 3 / 4 sections
- Each section separated with heading
- 2 Paragraphs with 20 - 30 words under each heading
- Add a list in one of the paragraphs
Fig 2.0 Week 1 Google Slides
29/04/20 (W3): Web Evaluation & Critics
Exercise 1 was assigned for students after the lecture, we need to create a Web Page HTML Document according to the word file given by Mr Shamsul by using Adobe Dreamweaver.
Fig 3.0 Week 3 Google Slides
 |
| Fig 3.1 Complete HTML Document & Attributes in Dreamweaver |
 |
| Fig 3.2 HTML Document Preview in Google |
FEEDBACK: Mr Shamsul said that I had done a good job and there were only some missing bold text and italic text in the HTML codes. The paragraph was nicely arranged that allowed him to look through easily.
06/05/20 (W4): Cascading Style Sheet CSS
The exercise today was to continue work on the same web page by adding the external and internal css inside the head element to give the web page a brand new look.
Fig 4.0 Week 4 Google Slides
FEEDBACK: Mr Shamsul said there was no big issue for the codes but line-height needed to be added for better readability of the web page.
13/05/20 (W5): Basic Interface Design
The exercise today was to continue work on the new web page by creating the CSS file and link it inside the HTML file to set the layout design for the website. Instead of using all of the images given by Lecturer, I decided to find some interesting images for the website design. After we have done our exercise 2, we had a consultation session on week 6 to make some correction on the layout design.
 |
| Fig 5.0 W5 images stock. given |
Fig 5.1 Week 5 Word Document
Fig 5.2 Week 5 Google Slides
Website Layout Design Before Consultation:
 |
| Fig 5.3 Basic Interface Design 1 |
 |
| Fig 5.4 Basic Interface Design 1 |
 |
| Fig 5.5 Basic Interface Design 1 |
 |
| Fig 5.6 Basic Interface Design 1 |
Website Layout Design After Consultation:
 |
| Fig 5.7 Final Interface Design |
 |
| Fig 5.8 Final Interface Design |
 |
| Fig 5.9 Final Interface Design |
 |
| Fig 5.10 Final Interface Design |
CLICK ME: https://practical-archimedes-32d1a4.netlify.app/.
FEEDBACK: Mr Shamsul mentioned that there was a minor error in HTML. The colour setting of the website link is not readability friendly, therefore a lighter blue colour was applied. Mr Shamsul seemed like not really like the gradient colour for the heading image however it was applied to aim to create a better contrast with the white body text. The grey background applied for the second article is good as it created a good hierarchy for the paragraph. Overall it looked like a professional web page design.
REFLECTION
15/04/20 (W1)
- Experience: The class for the first week seemed to be not that efficient and effective during the self-research session as most of the students were not creating a slide for presentation in that given 1 hour. They were soon given another 30 minutes to prepare the slides.
- Observation: Although there were some inconvenient for the online learning session Mr Shamsul was very patient to ensure students were learning at their best situation.
- Findings: The online learning method was lacking a sense of participation for me.
22/04/20 (W2)
- Experience: The online class today was a bit laggy because of the internet connection problem. I was not in a good state of study as a lecturer had to pause the live meeting at each section for recording purpose as well as to prevent the internet connection problem.
- Observation: The lecture notes for the HTML coding was rich and informative. During the live sharing section of the students HTML website coding after the lunchtime, It was really amazing that some of them did a great job as a lot of extra HTML codes which was not mentioned in the lecturer was inserted.
- Findings: I tended to out of the condition during the lecture section as the HTML coding language was to strange for me. However, I found that it was very interesting to learn HTML coding for the website when it came to the hands-on exercise!
29/04/20 (W3)
- Experience: The internet was still not stable especially for this class. However, the video recorded by the lecturer was good for doing revision.
- Observation: Some students might facing several problems with the codes and attributes, but I was happy that I really enjoyed typing the codes and attributes into the Dreamweaver.
- Findings: I quite blurred with the HTML codes and attributes at the beginning but I found it was very interesting to create a web page document from none to something! The problem was I could not focus at lengthy HTML codes and attributes in Dreamweaver for a long time as they appeared to be eye confusing.
06/05/20 (W4)
- Experience: It was very exciting that we could finally add some style for the boring web page by using the internal CSS in the HTML document.
- Observation: Everything about internal CSS is fresh and fun for me just like a kid playing with make-up, it was not as difficult as I expected before the class.
- Findings: Things will be even more exciting when I find out more about the numerous choice of adding different internal CSS!
13/05/20 (W5)
- Experience: The lesson today about the external CSS box model was quite challenging for me. The trial exercise guided by Mr Shamsul was a little hard for me to understand but still able to follow. However, I was confused when it came to the actual exercise as we have to do extra research to complete the exercise. Although Mr Lun did help us a lot by explaining the way how the CSS box model works but I was quite lost when I was facing my exercise alone.
- Observation: One of the biggest challenges was I found that I was not able to make use of all of the knowledge I had learnt from the previous lectures into this CSS box exercise flexibly.
- Findings: I believed that I could try my best to find out more solution independently through the internet :,)
20/05/20 (W6)
- Experience: There was no new lecture for today but mainly focus on exercise 2 consultation which allows all of the students to consult for advice as well solution for the error. Besides was the same issue again, internet connection problem.
- Observation: I observed that my classmates had come out with a highly personalised website design that was truly interesting and creative! Although Mr Shamsul mentioned that my website design is well done and looked professional. However, in my opinion, a more bold attempt was encouraged to break the norm of the typical professional website design. The final outcome was looked nice to be accepted but it's a little sad that my skill still not able to realize my bold imagination :'l
- Findings: I found that I still couldn't 100% fully understand the theory and the system of EXTERNAL CSS and it was not as easy as I expected. Maybe I just need some more time to digest the CSS box model :,) However, it was great that lecturers were very patient in helping the students, as well as my friends, were really keen in help solving my problem too!
.jpg)
Comments
Post a Comment