INTERACTIVE DESIGN // EXERCISE
Rebecca Thoo Hui Ying / 0350359
Bachelor of Designs (Hons) in Creative Media
Interactive Design Exercises
LECTURES
Week 01: 24.08.2021
Mr Mike started the class by explaining to the class about the module information and outcomes as well as what to expect for the class. He then briefed us on 5 key elements of The Web, which were very clear and informative.
1. What are Webpages, Browers & Websites
Webpages:
✧ A collection of text, images and sound stored on a single page that is accessible anywhere so long there is a connection to the Internet.
✧ Single Webpages sites are also called Parallax sites (a site that has multiple layers and are animated) or Landing Page (a static site)
Browers:
✧ A programme that allows the user to go anywhere on the Internet to retrieve information on other websites.
✧ Information is transferred to the user's device via HTTP (Hypertext Transfer Protocol).
Websites:
✧ A set of web pages that needs to be stored on a server and retreat by the browsers.
✧ Websites are developed with a purpose, for example: e-commerce (Amazon) & portfolio
Key and frequently used terms in web design.
Helps a brand to push their website so that it will appear on the top 3 searches on the web.
Controls placement of content.
To beautify a website applies the style to web page elements.
✧ JavaScript
Coding that enhances the functionality.
Serves customise content based on the user's profile, history and liking.
2. Static vs Dynamic Websites
Static Websites:
✧ Fixed number of pre-designed web pages that contain fixed content & structure.
✧ Are written entirely using only HTML
Dynamic Websites:
✧ A page that changes in real-time
✧ The contents are changeable, it is customisable based on the user's history, for example: the item a user often searches for on Shopee will appear on the landing page every time they log into the app.
3. Domain & Web Hosting
Domain:
✧ A set of characters that identifies a specific webs
✧ DNS (Domain Name Server) is a string of text that attaches itself to a website.
Web Hosting:
✧ It stores websites and data and to package the media, format it or backup on the server, for example: Cloud Servers (AdobeDomain:
✧ Web Hosting companies as landlords that lease out space and make sure the website runs on their optimal points
4. Frontend vs Backend vs Fullstack
Frontend:
✧ Client-side - builds to interact with users directly
✧ Uses: CSS, HTML & JavaScript
Backend:
✧ Server-side - coding, data base, serving up contents and managing contents
✧ Example: PHP, Phyton & JavaScript
Fullstack:
✧ Good at both front & back
✧ Understands UX, CSS, connect servers & present
✧ Familiar with HTML, CSS, JavaScript, PHP & Phyton
5. Types of Websites
Week 02: 03.09.2021
1. What are Web Standards?
Web Standards:
✧ The World Wide Web is an entire ecosystem of information (text, videos, graphics, sound, images) where content is fitted into, passes through a browser to allow users to access the information.
Analogy: The WWW is like a children's shape puzzle, there is a need to sort its different shapes into the correct holes. Different types of browsers are of different shaped holes and the content/ websites are the shapes that need to fit inside the holes.
✧ Content creators have to create special "shapes" to enable a website to fit into specific browsers.
✧ Hence the reason why we need Web Standards, so web content can go through any browser for everyone to retrieve information.
✧ Web contents (consist of text, images, videos, sounds, graphics), contents meant for media.
✧ (Days before Web Standards) every time a new feature was introduced, there is a chance the website would no longer work with that browser anymore. Web content consisted of large text, the website could initially fit through the majority of the holes. New features that were developed made it more difficult to make the "shapes" pass through. Every new update will hinder the function of a website as there is a chance it could no longer work with the particular browser.
Objective of Web Standards:
✧ Ensure browser makers were encouraged to adhere to a standardised way of doing things, where cross-compatibility becomes easier for content makers without the need to build multiple versions of the same website.
Why Web Standards?
✧ Keeping the web free & accessible to all (was meant for everyone in the world)
✧ Help make source code simpler
✧ Making the web a more accessible place (to ensure it stays this way)
✧ Allowing for backward compatibility & validation
✧ Helping maintain better SEO (SEO is all about keywords, to appear on the 1st search page)
✧ Creating a pool of common knowledge (places like Wikipedia exist because of Web Standards)
Standards are decided by "Standards Development Organisations", for example, World Wide Web Consortium (W3C)
2. HTML Scripting
Web Standards:
✧ Hypertext/ Hyperlinks- bring user to another link location or document once clicked.
✧ Markup Languages- define the text document within tag which defines the structure of web pages
✧ Markup Languages is used to annotate text so that a machine can understand and manipulate the text accordingly, most of the languages are HTML.
✧ HTML, important to always have opening tag & closing tag (HTML Element). What we see normally on the website is normally: <body> opening tag to </body> closing tag.
HTML Page Structure:
✧ <title>
✧ <base>
✧ <noscript>
✧ <script>
✧ <meta>
✧ <link>
✧ Tags: angled brackets, Attributes: tells what's in between the texts, Contents: what we put in between the texts.
Week 03:
Fig 3.1 Proper HTML page structure
Mr Tarmizi gave us a recap of the basics of HTML.
✧ Only one pair of <head></head> & <body></body> for every web page, all contents must reside within <body></body> section
✧ First web page mus tbe renamed as index.html
✧ Do not have spacing in between filename
✧ Each supported files (images, css & javascript files) in its own folder
Website Layouts
✧ Most websites organised their contents in multiple columns, which are created using <div> or <table> elements
✧ <div> layouts & CSS can create flexible layouts that work on various screen sizes
✧ Responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience
Week 04:
Introduction of Cascading Style Sheets (CSS)
✧ CSS makes website more flecible
⊹
CSS is reusable
⊹ Change stylesheet to change design of many pages
✧ Easier to maintain
⊹ Cleaner HTML code
⊹ Separates styles from HTML tags & page content
⊹ Consistent look across an entire website that is easily maintained by changing styles in one place
✧ As stated above, the .header { font-size:14px;} instructs all class under "header" to have 14px as its font size.
✧ The .info { font-family:verdana; font-colour:blue; font-size: 12px; } instructs all things under "info"
✧ Will only need to apply changes to 1 area, the others falling under the same class will follow suit
CSS: adding style
✧ CSS adds "style" to HTML webpage element, example : colour, size or positioning of information
✧ 2 aspects to adding style to webpage via CSS
⊹ CSS style "Declaration": Specifying what style looks like
⊹ CSS style "Selector": Naming HTML elements to which the style applies
✧ Always open a "Declaration" by opening a {
✧ Best to practice inserting inside <head> area
The most basic kind of CSS selector
✧ the above selects every instances of the corresponding HTML element and are commonly used
✧ Selects all elements on a page
✧ Can apply the same declaration to a group of selectors by listing all of the desired selector names separated by commas.
CSS: Selector flexibility
✧ The usefulness of selectors relates to how much specificity you have in selecting different parts of a web page
✧ You may not want the same font/colour type style throughout the entire <body> element
Naming HTML elements
✧ 2 naming options for an HMTL element: assigning "ID" names & "class names"
✧ An ID declaration is the same as a class declaration, except that it should only be used specifically once per web page
✧ ID we use (#), Class we use (.)
Aside: styling hyperlinks
✧ the associated style selectors are called the hyperlink (or "anchor")
CSS: what does cascading mean?
✧ Browsers read from top to bottom, in this case, the browser will determine the p font-weight to be normal as it reads from top to bottom, it will overwrite the top code
How/Where do we add the style declarations to our HTML files?
✧ Internal stylesheet: put style declarations in the <head> of HTML text file
✧ External stylesheet: put style declarations in a separate text file & then import that text file into your HTML file
✧ (not advisable) 3rd approach is Inline style: put style declarations within the HTML tag where it is used
INSTRUCTIONS
Week 03: Introducing <div> into existing webpage
FEEDBACK
HTML codes are correctly applied. Sir will want to comment on my file name, it should be named as index.html
-
REFLECTIONS
FURTHER READING
Comments
Post a Comment