INTERACTIVE MULTIMEDIA PROGRAMMING
HERE IS ALL LINKS TO ALL LABS I HAVE DONE IN THIS COURSE
LAB 1
In this lab, I have learnt these defintions:
a. HTMLHTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language. HTML uses tags for representing elements Webpages by HTML are built by blocks of HTML elements.
b. CSSCSS stands for Cascading Style Sheets It describes how the HTML elements are displayed on device, media It can be used to control multiple webpages all at once.
c. JavaScriptJavascript is a scripting languages, primarily used on the web. JS is an interpreted language and doesn't need to be compiled. JS can change the HTML content, attributes, styles and elements.
d. HTTPHTTP stands for Hypertext Transfer Protocol HTTP is the foundation of data communication for the World Wide Web. Hypertext is structured text that uses logical links (hyperlinks) between nodes containing text.
e. HTML5Addition to HTML. HTML5 offers more semantic approach for coding the markup of the website. It supports more features like sound, audio, canvas, video and animation.
f. Dynamic HTML (DHTML)used to create interactive and animated websites by using combination of a static markup language
In assignment 2, I have learnt about the coding convention, about the way to naming the variables and functions
In assignment 3, I have created 1 simple page with a simple function to alert "Hello World!" when the link is clicked
In assignment 4, I use console on web browser to test some functions if there are any errors
In assignment 5, I created a dynamic list which is able to add person to list and remove from list
LAB 2
Link to assignment 3, 4 and 5
ASSIGNMENT 1
What is the purpose of the RWD?
The web doesn’t have the design for the flexibility. The purpose of RWD is to help the website to be more flexible in multiple platforms (mobile web browser, desktop web browser, etc.) There are responsive architechtures like robotics and tensile materials, motion sensors
Why it is used?
Rather than creating immutable, unchanging spaces that define a particular experience, they suggest inhabitant and structure can—and should—mutually influence each other.
How things are done before RWD?
- straightforward two-column layout built on a fluid grid, with not a few flexible images peppered throughout
- Using JS code
What is the difference?
- When open the websites on mobile, pictures are resized and stressed out and cropped. The flexible design works well enough in the desktop-centric context for which it was designed, but isn’t optimized to extend far beyond that.
- With RWD, we use media queries for this, and the websites will be responsive on different media screens, papers.
How css media queries can help you building responsive web sites?
Base on media type and media features. CSS media queries also have screen resolution features. Using @media and @import rules.
Why to use em (font) based sizing for example margins?
Using ‘em’ for sizing, we can reserve space relative to other things/ objects.
ASSIGNMENT 2
I have tested on two pages: Boston Globe and Wellington City Council and Esquire about how responsive could work.
Here are some pictures I have taken for testing the responsive of webpages.
Boston Globe web page
Boston in 360px x 640pxBoston in 900px x 480px
Wellington City Council page in different screen sizes
Wellington City CouncilEsquire page in different screen sizes
Esquire pageASSIGNMENT 3, 4 AND 5
In assignment 3 and 4, I have used css @media and use unit in % to get responsive
In assignment 5, I modified the assignment 5 in lab 1 to be responsive. I used @media of CSS.
LAB 3
In this lab, I learnt how to use web socket and local storage.
Web socket is the technique support the communication between client and server by using one TCP socket to create an effective and low-cost connection. It is the new element in HTML5 and is a way of REVERSE AJAX
Storage is used to save the data without using backend programming language. It can help to save data to browser storage. There are two web storages: local storage and session storage. The differences between them are:
- Local storage can keep data even we reload the page or close and reopen browser.
- Session storage can keep data only when we reload the page without closing the browser.
In lab 3, there are 3 assignments:
- Assignment 1 is about web socket. In this assignment I have created a demo chat box.
- Assignment 2 is about local storage. In this assigment, I modified the assignment 5 in lab 1 into the MVC model. And the data which user input is also stored to the web storage.
- The last assignment is about audio and video elements, which are new in HTML5. I have made a user controller, not the default one.
Techniques used in lab 3:
- Web Socket
- Local Storage
- JavaScript to create function for controlling.
LAB 4
This lab is about canvas and working on canvas element supported in HTML.
In assignment 1, I have created a canvas which is able for user to draw line on it.
In assignment 2, I have created a mini game made with canvas
In this lab, I have used:
- Canvas element
- JavaScript to control how canvas look like after drawing something on it
- Some mousing event in here. And I have also made one for mobile but haven't succeeded yet.
- Time interval JavaScript function
LAB 5
In this lab, I learned about Jquery and AJAX
JQuery is cross-platform JavaScript library.
With Jquery, I can navigate document such as select elements and handle event,
create animations, effects, create plugins.
JQuery has these features:
- DOM elements selection, DOM manipulation based on CSS selectors
- Events, effects and animations
- AJAX
- deffered and promise objects, JSON parsing, extensibility through plugins, utilities, compatibility and multi-browser supports
AJAX stands for Asynchronous JavaScript and XML.
AJAX helps load data from server without reload the page.
AJAX uses HTML and CSS to display data.
AJAX uses XMLHttpRequest object to receive small amount of data from server
CDNs are the system of computers where store the copied of data, and those computers are placed
in various points globally. Users from different area will access to the nearest point to
get data.
When using CDNs, I get the benefit of high speed, prevent from overloading data,
save bandwidth for the host computer and save money (for bandwidth).
In assignment 2, I have use JQuery to modify again the assignment 5 in lab 1, replace JavaScript function by JQuery
In assignment 3, I used AJAX to get data from a JSONP file. Because of crossing the origin so that I was not able to use JSON. So I used JSONP instead.
JSON stands for JavaScript Object Noattion.
JSON is a syntax for storing and exchanging data.
Structure is based on JavaScript's structure.
JSON format is text only, it can easily be sent to and from a server,
and used as a data format by any programming language.
JavaScript has JSON.parse() function to convert a JSOn string into JavaScript object
JSONP is JSON with Padding.
JSONP is a method for sending JSON data without worrying about cross-domain issues.
JSONP does not use the XMLHttpRequest object.
LAB 6
In this lab, I used the Flickr feed API ( with $.getJSON() ) to get data and created a simple page of Flickr. Below is the example of the page. (The pictures are shown fixed to page. If you want to zoom in, just click and focus on that picture).
Link to githubLink to full page