COAP:COAP-3000/week1: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 3: | Line 3: | ||
|do_not_show_sub_page=No | |do_not_show_sub_page=No | ||
|page_parente=COAP:COAP-3000 | |page_parente=COAP:COAP-3000 | ||
|next_page=COAP:COAP-3000/week2 | |||
|status=to improve | |status=to improve | ||
|last_modification=2018/03/16 | |last_modification=2018/03/16 | ||
|objective=install and use a simple JavaScript library | |objective=install and use a simple JavaScript library, | ||
create HTML slides with impress.js | create HTML slides with impress.js, | ||
customize a CSS style-sheet | customize a CSS style-sheet respecting design constraints, | ||
create a simple screen cast | create a simple screen cast | ||
|prequisites=CSS tutorial, | |prequisites=CSS tutorial, | ||
Revision as of 19:45, 16 March 2018
Week 1 - Create fancy animated presentations with impress.js
Learning goals
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>
Recommended HTML editors
- Brackets HTML5 programming editor (recommended for this class)
- BlueGriffon HTML 5 editor
- BlueFish HTML 5 programming editor
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/impress/impress.js/ (click on clone or download and pick the zip file)
- Notice: The original web site (https://github.com/bartaz/impress.js) is dead.
- Unpack the zip archive
- Copy index.html to project1.html
- Rename index.html to save.html
- Modify contents of project1.html
Modification of the CSS
You can modify the CSS file (css/impress-demo.css to adapt to your needs).
Simple example. Get the following files ("save link as") and put them into a different directory.
Example of a talk:
- Digital design and fabrication in education (could be much improved...)
Homework 1
(1) Create a presentation with impress.ch
- You can freely choose a topic and reuse prior work.
(2) Create a report with a screencast
- Show some slides (not the whole presentation)
- The report should include your objectives, a 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.
Upload the to the World classroom (Canevas):
- A zip file for the presentation
- A video file for the report.
Tip: Uzip 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
- 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, not needed)
- CSS tutorial
- Documentation for techies
- CSS transforms tutorial (Follow up the links)