COAP:COAP-3000/week1: Difference between revisions
Jump to navigation
Jump to search
| Line 3: | Line 3: | ||
'''Prerequisites''' | '''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. | You should be familiar with basic HTML and CSS. Below are some resources that could help you catching up. 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. | ||
* [http://www.w3.org/MarkUp/Guide/ Getting started with HTML] ( | * [http://www.w3.org/MarkUp/Guide/ Getting started with HTML] (Recommended reading for students without any prior HTML4 or XHTML 1 knowledge). Ignore the [http://www.w3.org/MarkUp/Guide/Advanced.html Advanced guide]. It's outdated. | ||
* [[HTML and XHTML elements and attributes]] or any other good HTML tutorial on the Web... | * [[HTML and XHTML elements and attributes]] or any other good HTML tutorial on the Web... | ||
| Line 11: | Line 11: | ||
* [[CSS tutorial]] or any other good CSS 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) | * [[Javascript_tutorial - basics]] (in particular, you should know how to use a JavaScript library). In particular, load JS code into a page like this: | ||
<script type="text/javascript" src="external.js"></script> | <script type="text/javascript" src="external.js"></script> | ||
Revision as of 22:37, 24 August 2014
Week 1 - Create fancy animated presentations with impress.js
Prerequisites
You should be familiar with basic HTML and CSS. Below are some resources that could help you catching up. 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 (Recommended reading for students without any 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). In particular, load JS code into a page like this:
<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"):
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
- Documentation for techies
- CSS transforms tutorial (Follow up the links)