INTERACTIVE DESIGN
0344802
BACHELOR OF DESIGN (HONS) IN CREATIVE MEDIA
INSTRUCTIONS:
INTERACTIVE MEDIA MIB
LECTURES:
Week 1:
WEEK 1 LECTURE SLIDES
Our first class of Interactive Design was taught by Mr.Mike. The lecture was about the Web and how it works. He briefly described all the elements of the web and how everything is developed. Here a is a summary of the important notes:
A Web page: A document with text, images, sound and video that is accessible from web on any device with an internet connection and a web browser
Web browser : A programme that gets you anywhere on the internet, from websites to your devices.
HTTP (Hypertext Transfer Protocol) : how information is transmitted on the web.
Website: A set of webpages stored or hosted on web servers. Designed for specific purposes. unique domain name.
3 Web technologies: HTML, CSS, JavaScript
HTML: Provides structure and meaning to content
CSS: To stylise the website with layout, colours, fonts...etc
JavaScript: Programming language used to create dynamic and highly interactive websites.
Landing page: first page / home page
Static websites: fixed number of pre-rendered web pages, hardcoded, fixed content and structure. Users see same content. Written entirely using HTML.
Dynamic websites: Generate pages in real-time. flexible customisable content structure. Controlled by CMS
CMS: Content Management System
Domain: Unique set of characters to identify specific website. (eg. House name, persons name). Browser searches through Domain Name Server (DNS) to find domain location.
Frontend development: built to interact with users directly. Appearance of website. Uses Adobe, HTML, CSS, JS.
Backend development: Server-side web application logic and integration. Writing code to help database and application communicate. In charge of servers, database and application. Uses PHP, Python, JS.
Full stack development: Includes both frontend and backend design and programming.
Week 2:
WEEK 2 LECTURE SLIDES
Week 3:
Mr.Tarmizi took over for Interactive design from Mr.Mike for the rest of the semester starting from Week 3. The lecture for Week 3 was regarding HTML:
- The first tip given by Mr.Tarmizi was to always close the <html> tag
- Only one pair of <head></head> and <body></body> per web page
- All contents must reside within <body></body> section
- First webpage must be renamed as index.html
- No spaces in file names
- Each supported files (images, css, javascript) must have it's own folder
- if image folder name is images, the filename in HTML code must be <img src="images/photo.jpg">
- If linking to other website, start from https:// (eg. <a href_"https://www.taylors.edu.mv>
- JPEG: commonly used in photographs / Not good for graphics / Non transparent
- PNG: Good compression / good for graphics / can be transparent
- GIF: Low quality / common for animations
- Most websites have multiple columns organised like a magazine
- <div> or <table> are used to create multiple columns
- CSS is used to position elements or to create the colourful look
- Responsive web design is an approach aimed to work on all devices.
- <div> tag defines division or section in HTML document
- <div> is used to group block-elements to format them without CSS
- <div> element is often used with CSS to layout webpage
WEEK 4:
- CSS is reusable
- changes stylesheet to change designs of multiple pages
- easier to maintain
- cleaner HTML code
- Consistent look
- Separate content to form
- CSS allows to add style to web page (colour, size, positioning...)
Content:
<p class=“header”>My First Header</p>
<p class=“info”>My Information 1 goes here</p>
<p class=“header”>My Second Header</p>
<p class=“info”>Different Information goes here</p>
Form or Style:
.header { font-size:14px;}
.info { font-family: verdana;
font-color: blue; font-size: 12px; }
<font size=“14px”>
My First Header
</font>
<font size=“12px” color=“red” face=“Verdana”> My information 1 goes here.
</font>
<font size=“14px”>
My Second Header
</font>
<font size=“12px” color=“red” face=“Verdana”> Different information goes here.
</font>
CSS Adding style:
CSS Declaration: specifying what the style looks like
{
font-size: 10px;
background-color: #ffffff;
color: #222222;
margin: 20px;
}
Selector: Naming HTML element to which style that applies
body {
font-size: 10px;
background-color: #ffffff;
}color: #222222;
Most basic CSS Selector: simple type selectors / wildcard selectors, eg: body{}, p{}. * { }
selects all elements on a page & can be used in combination with other selectors
* can apply declaration to a group of selectors using comma: h1, h2, h3 {color:#ff0000; font-family:sans-serif}
* Can select specific parts of the web page to apply selectors.
p{
font-size: 10px;
background-color: #ffffff;
color: #222222; }
- ID
- Class names
eg: class name bigblue to <h1> tag;
<html> <body>
<h1 class=”myboldandbluelook”> Introduction </h1>
</body>
<html>
Connecting style declaration to class name:
.myboldandbluelook
{
font-weight: bold;
color: blue;
}
Cascading: a more-specific selector beats out a less-specific selector. When there is a "tie" regarding specific selectors, the last-defined selector wins.
Internal stylesheet: Put style declaration in the <head> of HTML. eg:
<head>
<style type=“text/css”>
CSS Code Here
</style>
</head>
External stylesheet: Put style declaration in separate text file and then import that text file. eg:
<head>
<link rel=“stylesheet” href=“style.css” type=“text/css”>
</head>
Inline style: Simply putting style declaration within HTML tag where it's used. eg:
<p style=“font-size: 14px;”>Text</p>
WEEK 5:
This week's lecture was about Adobe Dreamweaver.
- Dreamweaver is a website building software developed by Macromedia, now part of Adobe
- Dreamweaver has an easy to use visual interface, built-in code editor, is part of Adobe CC
- Has many built-in features to allow web developing without complex use of coding
EXERCISES:
Week 1:
For our first task, we were told to choose any 5 types of websites and
write their differences with examples. Here is my selection:
TASK 1 Slides
Week 2:
On week 2, we were taught on how to write html using w3school.com where we can write and run the html back to back so we can see the progress very easily. We were taught the basics of html such as structuring and formatting text and inserting images as well.
Writing html for exercise 2 in w3schools.com
Among us: exported PDF of the webpage
Week 3: For this week, our task was to add the division tag into our previous HTML file. Here is the result:
Week 4: Adding CSS styling to the HTML
REFLECTION:
Week 1: I have always struggled with web developing and coding so this module is something that will definitely challenge me but it is also something I need to learn more so I am hoping it will teach me somethings new.
FEEDBACK:
Week 2: I showed Mr.Mike my first webpage that I wrote and he said it was good.
WEEK 5: Mr.Tarmizi's feedback on exercise 1: "My comment on your submission is your application of CSS is very limited to HTML tags, and it would be good if you could have class or id selector within your HTML tags and apply styling to it."
ADDITIONAL READING:
Comments
Post a Comment