COAP:COAP-3000/week3

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:

• CSS transforms tutorial
• CSS animations tutorial

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 vido 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 ?

Mid term

Week 5, Wednesday

Topic:

• CSS animation

Preparation

• Find all animation attributes (find a good tutorial, follow the links in the CSS animation tutorial
• Study some examples
• Do homework project 4

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.