Interactive Design - Exercises

on

24/8/21 - 14/9/21 / Week 1 - Week 4
Loke Yeanne Tung / 0343853
Bachelor of Design (Hons) in Creative Media / Taylor's University
Interactive Design / Exercises


LECTURES

Lecture 1 - The web and how it works
1. What are webpages, web browsers and websites?

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.


Fig. 1.1 Examples of web browsers

Web browser: A programme that gets you to 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), that defines how the text, images, video and sound is transmitted on the web.


Fig. 1.2 Example of websites

Website: A set of webpages that are stored or hosted on web servers. Websites are designed for specific purposes such as e-commerce, portfolio, branding etc.


Fig. 1.3 Difference between HTML, CSS and Javascript

Websites are made with 3 web technologies:
  • 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's a programming language


2. Static vs Dynamic Websites


Fig. 1.4 Example of a static website

Static websites consist of a fixed number of pre-rendered web pages containing hardcoded, fixed content and structure. As a result, users see the same content regardless of who they are, where they're from, and which browser they're using. Static websites are written entirely using HTML.


Fig. 1.5 Example of a dynamic website

Dynamic websites generate pages in real time. Dynamic websites are written using more complex code such as PHP or ASP and has a greater degree of functionality.


Fig. 1.6 Difference between static and dynamic websites


3. Domain and web hosting

Fig. 1.7 Uniform resource Locator (URL)

The Domain Name is a unique set of characters that identifies a specific website, it can be used in URLs to identify articular web pages.

Web hosting is where we store (or 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.


4. Frontend vs backend vs fullstack


Fig. 1.8 Software involved in frontend development

The frontend of a website or application is the part that is built to interact with users directly. Cascading Style Sheets (CSS) for controls the outlook of a website.


Fig. 1.9 Software involved in 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.


Fig. 1.10 Software involved in fullstack development

Fullstack development includes both Frontend and Backend design and programming. Fullstack developers are software experts who's equally proficient in frontend (client-side) development and backend (server-side) development.


Lecture 2 - Web Standards and HTML

Why were web standards introduced?
  • World Wide Web: A information ecosystem where content created by anyone is fed into the web, passes through a browser to allow others to access that information
  • Referencing to a children's toy, we have to match up different shaped blocks into the correct holes
    • Bright-colored blocks: Content or websites
    • Different shaped blocks: Browsers
  • Content creators would have to make a website to fit the specific browser
    E.g. 'Safari-shaped block' to fit into the Safari hole
  • As it is one size fits ONE, we would need to rebuild our content into other shapes for it to be viewed on other browsers.
  • In the 90s, web developers would often have to make 3-4 version websites so that it would be compatible with all the browsers at that time.
  • Initially, a website block would fit through majority of the blocks but as newer browsers were developed, new features became more difficult to make into blocks to fit into the holes.
  • Every time a new feature or version is released, there is a chance that our website would no longer with that browser.
  • Web standards: Rules and guidelines that helps standardize the way of doing things making cross-compatibility easier for content makers without the need of creating multiple versions of the same website

Why web standards?
  • Making the web a more accessible place
  • Helps making source code simpler; reducing development and maintenance time
  • Help maintain better SEO (Search Engine Optimization)
  • Creating a pool of common knowledge

HTML Scripting
  • HTML created by TIm Beners-Lee in 1991
  • Hypertext (link between web pages) + Markup Language (set of instructions for the browser to understand)
  • Most markup language are human-readable (we can make sense of just by reading it)


Fig. 2.1 HTML example

Fig. 2.2 HTML page structure example

HTML Elements:
  • <DOCTYPE! html>
    Declares a document as being a HTML document. Not case-sensitive.
  • <html>
    Base container for everything on your webpage
  • <head>
    "Behind the scenes" elements, we can't see it. Do not erase it as the browser needs it although it's not visible on the webpage. HTML elements used inside the <head> elements include:

    • <style>
    • <title>
    • <base>
    • <noscript>
    • <script>
    • <meta>
    • <link>
  • <body>
    Actual content of the webpage, you'd see nothing but a white screen if you were to leave it blank.
  • <p>  Defines a paragraph.
  • <ul>  Unordered list
  • <ol>  Ordered list
  • <li>  Bullet points
  • <a href>
    Hypertext reference, the target attribute specifies where to open the linked document.



Lecture 3 - Introduction to HTML

Fig. 3.1 Proper HTML page structure

Only one pair of <head> </head> and <body></body> for every web page. All contents must reside within <body></body> section.


Fig. 3.2 Division in HTML

The <div> tag defines a division or a section in an HTML document. The tag is used to group block-elements to format them with CSS.


Lecture 4 - Introduction to Cascading Style Sheets

Why CSS?

1) Makes website more flexible
  • CSS is reusable
  • Change stylesheet to change design of many pages
2) Easier to maintain
  • Cleaner HTML code
  • Separates styles from HTML tags and page content
  • Consistent look across entire website that is easily maintained by changing styles in one place


Fig. 4.1 Separation of content from form

CSS allows you to add "style" to an HTML (web page) element (E.g. color, size, or positioning information).

There are 2 aspects to adding style to a web page via CSS:
  • CSS "Declaration" - Specifying what the style looks like
  • CSS "Selector" - Naming the HTML (or XML) element to which the style applies 

The "declaration" part looks a bit like HTML:

Fig. 4.2 A CSS declaration

CSS declaration takes an HTML element and adds a background color, a margin, and changes he element's font size/color.


Fig. 4.3 Insertion of selector before declaration

This tells the browser to apply the declared style to the HTML <body> element.



Fig. 4.4 Grouping selectors

Same declaration can be applied to a group of selectors by listing all of the desired selector names separated by commas.





Fig. 4.5 Connecting a style declaration to a class name

To connect a style declaration to a particular class name you wrote into your HTML document, you simply precede the class declaration with: .theclassname / #theidname


Fig. 4.6 Styling hyperlinks

Fig. 4.7 Example of a tie in selectors

When there is a tie, the tied selector that is most immediately preceding the HTML element wins (in this case, the second "p" selector).


Fig. 4.8 3 places to define styles


INSTRUCTIONS




Week 1 Exercise
We had to choose 5 from the following list and explain why are they such websites. What are their unique features and tells us what kind of websites they are. Explain what are their functions, what kind of contents do they hold and show a popular example each.
  • Business Websites (✓)
  • Blogs (✓)
  • E-commerce Websites (✓)
  • Portfolios (✓)
  • Event Websites
  • Online Forums
  • Personal Websites
  • Membership Websites
  • Non-profit Websites
  • Informational Websites (✓)



Week 2 Exercise
We have to create a webpage with the requirements below using Notepad and save as index.html to launch it on a browser so the hyperlinks would work.




Attached above is my attempt of the exercise Mr. Mike gave us, but the only way to view the outcome is to copy the text from the document below and paste it to Notepad and save it as index.html and press double click on the item then only you'll be able to see it on the browser.


Week 3 Exercise
Continuation from week 2 exercise, we had to incorporate div, div id and div class and send it to Mr. Tarmizi's email for checking.



Week 4 Exercise
For this week's practical, we had to use the same html file (index.html) we created in the beginning, create an external style sheet to store the <style> elements and link it with the html file.

Fig. 5.1 HTML modification #1


Fig. 5.2 HTML modification #2


Fig. 5.3 Code in CSS file
FEEDBACK

Week 3
Specific Feedback: I have reviewed your code, and it seems all your HTML codes inside this file are correctly applied except one; good job on that. The only comment that I have on your code is on your last paragraph you should ended the div after you close the paragraph. Basically if the sequence of your code is div and p, the closing should be p and div. My other comment is that the file you’ve sent should be named index.html. However, this is a very minimum error and doesn’t reflex anything in marking.

Week 4
Specific Feedback: Hi Yeanne, finally managed to check your exercise 1 codes, and thank you for fixing it. The codes now looks good, and hope you keep continuing your good work throughout the semester ya. Thank you.


REFLECTIONS

Experience
The lectures were mostly done in class, and Mr. Tarmizi was very clear in answering our questions when we needed the clarification.  

Observation
I observed that when I did the html coding, it took me some time to process what was in front of my screen, and all I had to do was to scan through each line of the code to check if anything went wrong with that line of code.

Findings
I found that being organized in coding is essential as it keeps your code looking neat and nice. The HTML beautifier online is really a life savior in helping me format and beautify the codes.

Comments

Post a Comment