COAP:COAP-3000/week1

The educational technology and digital learning wiki
Jump to navigation Jump to search
COAP:COAP-3000
▬▶
to improve
2018/03/18 ⚒⚒ 2018/03/16
Objectives
  • install and use a simple JavaScript library
  • create HTML slides with impress.js
  • customize a CSS style-sheet respecting design constraints
  • create a simple screen cast

Objectives

  • install and use a simple JavaScript library
  • create HTML slides with impress.js
  • customize a CSS style-sheet respecting design constraints
  • create a simple screen cast


  • Quality: to improve

Week 1 - Create fancy animated presentations with impress.js

Learning goals

  • See the box to the right

Prerequisites

You should be familiar with basic HTML5 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 HTML5 for Masterminds textbook (the bookshop should have some left over copies).

You also should be able to use a simple JavaScript library and a JavaScript console in your webbrowser. If you do not, you will catch up this lesson.

  • CSS tutorial (this wiki) or any other good CSS tutorial on the Web...
<script type="text/javascript" src="external.js"></script>

Writing JavaScript code

Recommended HTML editors

  • Any editor that includes some support for syntax coloring and code indentation can do.
  • Brackets HTML5 programming editor (recommended for this class)
  • BlueGriffon HTML 5 editor
  • BlueFish HTML 5 programming editor

Monday

Impress.js demos

Student activities / impress.js

Notice: The original web site (https://github.com/bartaz/impress.js) is dead.
  • Unpack the zip archive
  • Copy file index.html to project.html
  • Rename file index.html to save.html
  • Modify contents of project.html

Modification of the CSS

You the should/can modify the CSS file (css/impress-demo.css to adapt to your needs).

Simple example (original CSS code modified)

Example of a talk:

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
CSS tutorial
Documentation for techies