COAP:COAP-3000/week1

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 topics - Create animated presentations with impress.js and screen casts

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.

• HTML basics (MDN, retrieved March 2018).

• HTML and XHTML elements and attributes (this wiki) or any other good HTML tutorial on the Web...

• CSS tutorial (this wiki) or any other good CSS tutorial on the Web...

• Javascript_tutorial - basics (in particular, you should know how to load a simple JavaScript library:

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

Monday

Introduction to COAP 3000

• Learning goals / topics
  • discuss the syllabus in the world class room
• Web sites (World classroom / EduTechwiki)
• Teaching strategy (mini projects)
• Evaluation
• Prior knowledge of participants (table to fill in)
• Testing if software works:
  • Animate CC
  • Screencast-o-matic
  • Headsets (where can we borrow these ?)
• Q/R

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

Project files and Brackets configuration

Project directory

• Make sure to put all the files you need for a project into a single directory
• Then open that directory. Brackets will consider all the files in the directory to be part of the same project. This will help getting correct links done.

Useful Brackets extensions

To install an extension

• File->Extension Manager
• Use the search menu
• Sometimes, you also can drag and drop zip files from git repositories in order to get the latest version)

Recommended for this class:

• HTML Templates. Take the version by Travis Almand (there are several others)
• Beautify.

Impress.js download and demos

Impress.js demos

• Official demo
• Other demos are available from the Examples and demos (the official site, scroll down). E.g. look at: Learning to design

Documentation

• impress.js (Tutorial in this wiki)
• The source code of the https://impress.js.org/ the HTML code (locally, look at the source code of the index.html file)

Hands on

Student activities / impress.js (homework/project 1)

(0) 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.

(1) Unpack the zip archive

(2) Copy file index.html to save.html

(3) Modify contents of index.html (continued on Wednesday)

• Identify a presentation topic. Make it simple, e.g. present/discuss an interesting concept.
• On a piece of paper, sketch out a layout that includes the most important steps.
• Create the contents and at the same time think about presentation effects (see the next item)

(4) Create 2-3 steps starting from the existing examples

• Make sure that each step has its own ID.
• Adjust position, scale and rotation

Attribute	Description	Values	Default value	Example
data-x	Center of slide on x-axis	pixels	0	data-x ="-1000"
data-y	Center of slide on y-axis	pixels	0	data-y="1000"
data-z	Center of slide on z-axis	pixels	0
data-rotate-x	Rotation of the slide around x-axis	degrees	0
data-rotate-y	Rotation of the slide around y-axis	degrees	0
data-rotate-z (or data-rotate)	Rotation of the slide around z-axis	degrees	0	data-rotate="270"
data-scale	Scaling of slide	Number	1	data-scale = "10"

(4) Modification of the CSS (continued on Wednesday)

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

Simple example (original CSS code modified)

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

Example of a talk by your instructor

• Digital design and fabrication in education (could be much improved...)

(5) Prune the whole directory for distribution, i.e. only include files that are needed.

Wednesday

On Wednesday you will learn how to create a screencast and you also will have time to work on your project.

Create Screens casts with screencast-o-matic

Create a screen cast with the free Screencast-o-matic program. You are free to use other screen casting software. You may consider buying the pro version.

• Make sure that you can register (this should be easy on a laptop). At Webster you should use an external microphone available from the lab assistants (?)
• Launch Screencast-o-matic. This is a web app and you will have to download the code each time you use it. You now should see a selection rectangle, a black box with some controls and (optionally) a little video filming yourself.
• Set the size and the position of the rectangle defining the zone to be registered.
• Test if audio works (watch the narration field in the black record box)
• Click on the red REC button

Other screen casting software (optional!)

Many other options exist. Below are three examples

• ScreenCastify for the Chrome browser. (web store)

• On a Mac, use Quicktime (it should be free and installed). Registering the screen should be in the file menu.

• Active Presenter 7 (Mac/Win).

Free and simple Video editors (optional)

• Mac: Use iMovie (should be installed already).
• Windows: Try either OpenShot or ShotCut

Some CSS principles recalled

Assign more than one class> to an HTML element:

 <div id="slide12" class="step thoughts" data-x="400" data-y="-1100" data-scale="0.4">

• "step" is a class
• "thoughts" is a class

CSS hierarchy (read Cascade and inheritance) - CSS properties are combined (computed) from all CSS files and inline definitions according to some rules. Now image that you got several conflicting CSS rules for the same tag.

(1) Cascading principle:

• Last found rule defining a CSS property will be used

For example:

• An inline CSS definition has priority over a CSS definition in the head section or a CSS file.
• A CSS file that comes after a CSS definition in the head will win.

.... but see the "important!" principle below.

(2) Important principle:

• Rules that include !important will always win (unless there is a conflicting other one)

.hotstuff {
 background-color: red !important;
}

(3) Specificity principle:

• Within the same CSS document, a CSS rule with a more specific selector wins over a more general definition

<div class="step slide"> <p>Hello</p> </div>

/* default size for all elements within an element that is of class "step".
. step {font-size: 30px;}
/* the next CSS rule will win, in the above example. It is more specific since it defines how all p's within a slide class should look */
. slide p {font-size: 40px;}

Project 1 work (continued)

• Continue working on contents and CSS (see the Monday program)

Homework/Project 1

Task

(1) Create a presentation with impress.js

• You can freely choose a topic and reuse prior work.

(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 of the screen cast, 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.
• Show some slides (not the whole presentation)

Submission

Upload to the World classroom (Canevas):

• A zip file for the impress.js presentation (must be functional after dezipping)
• A report as sreen cast file or written 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:

• Wednesday week 2, before class

Evaluation

• Contents: Does the presentation make an interesting "point" ?
• Technical modifications: Does the CSS include interesting modifications ? Did you define a new class ?
• Quality of the visual design: Is the presentation visually appealing. Does it go beyound simple slides.
• Report: Does the report state the objectives, shortly present the design, include an auto-evaluation
• In time: Was the project turned in before wed, week2, 9h ?

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

• CSS tutorial

Documentation for techies (optional)

The data-* are so-called custom data attributes, that allow proprietary information to be exchanged between the HTML and its DOM representation by scripts. (MDN, March 2018)

• 3.2.3.8 Embedding custom non-visible data with the data-* attributes
• CSS transforms tutorial (Follow up the links)