COAP:COAP-3000/week3: Difference between revisions

Latest revision as of 22:14, 17 April 2018

COAP:COAP-3000
◀▬▬▶
⚐	☸
⚒ 2018/04/17
Objectives
create CSS3 animations add simple interactivity (again)

Objectives

create CSS3 animations
add simple interactivity (again)

Week 3 topics - Some cool CSS

Learning goals

Create CSS transforms (just FYI)
Create CSS animations
Consolidate use of JavaScript buttons and manipulating CSS properties

Understanding that every element in a web page is rectangular box is the starting point for creating fancy layouts, transforms and animations. Any box can be styled, transformed and animated over time.

CSS3 transforms allow scaling, moving, turning, distorting and rotating HTML elements. 2D transforms use "methods" like translate(), rotate(), skew() and scale(). 3D transform properties include translate3d, scale3d, rotateX, rotate and rotateZ. These properties then can be used to create animations with or without JavaScript programming.

CCS3 animations allow defining keyframe animations of almost any CSS properties (including transforms).

Animation = changing a property of an object (e.g. a position, a color, a size) over time.

(Minimalistic!) Wikipages:

Wednesday lesson

Discussion of Week1 homework. You did good work, but I am not happy with the reports and we must discuss this before I grade...
Demo by the instructor, including:
- Play with examples in the CSS animations tutorial
Start working on the project

Project / homework 3

Task

(1) Create an HTML page that includes an interactive animation

Requirements:

Animate at least four different CSS attributes.
Include a least one animation
The HTML page should include all elements that required to understand what the animation is about (see usable and useful below)
The HTML page should allow a user to stop, or to stop/start, or to start an animation.

A useful, usable and attractive page will get a better grade. "Useful" means that a defined target population will likely appreciate this page. "Usable" means that a typical user will figure out how to use the page and its controls. "Attractive" means that a typical user likes the visual aspects.

(2) Create a report as screen cast (Alternatively write a written report of 400 to 500 words plus screen captures)

The report should include objectives (what is it's purpose ? audience ?) of the video, a short discussion of your design and an auto-evaluation. You also can mention how you did it, problems encountered. etc. Make sure to keep down the file size.
Max. length of the screen cast= 2 minutes. Make sure to "dive in" directly. Do not waste time on less important stuff, e.g. your personal motivations, prior experience, etc.

Submission

Upload to the World classroom (Canevas):

A zip file for the HTML,CSS,video,JavaScript, etc. (must be functional after dezipping)
A report as screen cast file or written report.

Tip: Unzip the file somewhere in your own computer and test if it works (e.g. some files may be missing and the presentation will fail)

Due:

Wednesday week 4, before class

Evaluation

Contents: Does the HTML page together with the animation make an interesting "point" ?
Technical elements: Correct use of CSS, HTML (and JS code if needed)
Original work.
Quality of the visual design: Is the page visually appealing ?
Report: Does the report state the objectives, shortly present the design, include an auto-evaluation
In time: Was the project turned in before wed, week 4, 9h ?

Links

CSS transforms tutorial
CSS animations tutorial
Then, use the web ! Look at the date of the page. I recommend only using pages that have been updated within the last year or so.

@@ Line 1: / Line 1: @@
-{{stub}}
+{{syllabus
+|is_part_of_syllabus=COAP:COAP-3000
+|do_not_show_sub_page=No
+|page_previous=COAP:COAP-3000/week2
+|page_next=COAP:COAP-3000/week4
+|objective=create CSS3 animations,
+add simple interactivity (again)
+|cat_syllabus=COAP-3000
+}}
 == Week 3 topics - Some cool CSS ==
 Learning goals
-* Create and position CSS boxes (recall)
+* Create CSS transforms (just FYI)
-* Create CSS transforms
+* Create CSS animations
+* Consolidate use of JavaScript buttons and manipulating CSS properties
 Understanding that every element in a web page is rectangular box is the starting point for creating fancy layouts, transforms and animations. Any box can be styled, transformed and animated over time.
@@ Line 11: / Line 19: @@
 CSS3 transforms allow scaling, moving, turning, distorting and rotating HTML elements. 2D transforms use "methods" like translate(), rotate(), skew() and scale(). 3D transform properties include translate3d, scale3d, rotateX, rotate and rotateZ. These properties then can be used to create animations with or without JavaScript programming.
-CCS3 animations allow defining keyframe animations.
+CCS3 animations allow defining keyframe animations of almost any CSS properties (including transforms).
+Animation = changing a property of an object (e.g. a position, a color, a size) over time.
 (Minimalistic!) Wikipages:
@@ Line 19: / Line 29: @@
 == Wednesday lesson ==
+* Discussion of Week1 homework. You did good work, but I am not happy with the reports and we must discuss this before I grade...
 * Demo by the instructor, including:
 ** Play with examples in the [[CSS animations tutorial]]
@@ Line 55: / Line 66: @@
 === Evaluation ===
-* Contents: Does the HTML page together with the vido make an interesting "point" ?
+* Contents: Does the HTML page together with the animation make an interesting "point" ?
 * Technical elements: Correct use of CSS, HTML (and JS code if needed)
 * Original work.