COAP:COAP-3000/week1

Week 1 - Create fancy animated presentations with impress.js

Prerequisites

You should be familiar with basic HTML and CSS. Below are some resources. Alternatively, you also can read chapters 1 (section on "traditional elements") and 2 of the textbook. You also should be able to use a JavaScript library.

• Getting started with HTML (mandatory reading for students without prior HTML4 or XHTML 1 knowledge). Ignore the Advanced guide. It's outdated.

• HTML and XHTML elements and attributes or any other good HTML tutorial on the Web...

• CSS tutorial or any other good CSS tutorial on the Web...

• Javascript_tutorial - basics (in particular, you should know how to use a JavaScript library)

<script type="text/javascript" src="external.js"></script>

Monday

Impress.js demos

• impress.js (Tutorial in this wiki)
• Examples and demos (from the official site)

Student activities / impress.js

• Download impress.js from

https://github.com/bartaz/impress.js

(find the Download ZIP button to the right)

• Unpack the zip archive

• Copy index.html to project1.html
• Copy index.html to save.html

• Modify contents of project1.html

Examples:

Get the following files ("save link as"):

• test.html
• impress.js
• impress-min-presi.css

Homework 1

• Create a presentation with impress.ch
• You can freely choose a topic and reuse prior work.
• Your presentation must be uploaded as a zip file to the World classroom (Canevas)

Due

• Wed, week 2, before class

Documentation / Links

Impress.js

• impress.js (documentation in this wiki)
• Official impress.js website (including downloads, examples and links to other resources)
• Building Impressive Presentations with impress.js - Ebook (E-book, $14.99, half price of that in Aug 2013)

CSS tutorial

• CSS tutorial

Documentation for techies

• CSS transforms tutorial (Follow up the links)