COAP:COAP-2160/week1: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
(Created page with "== Week 1 - Create fancy animation presentations with impress.js == === Monday === === Wednesday === === Homework === * Create a presentation with impress.ch * You can f...")
 
mNo edit summary
 
(19 intermediate revisions by the same user not shown)
Line 1: Line 1:
== Week 1 - Create fancy animation presentations with impress.js ==
== Week 1 - Create fancy animated presentations with impress.js ==


'''Prerequisites'''


=== Monday ===
* [http://www.w3.org/MarkUp/Guide/ Getting started with HTML] (mandatory reading for Ghazzawi and other students without prior HTML knowledge). Ignore the [http://www.w3.org/MarkUp/Guide/Advanced.html Advanced guide]. It's outdated.


=== Wednesday ===
* [[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...


=== Homework ===
== Monday ==
 
'''Impress.js demos'''
* [[impress.js]] (Tutorial in this wiki)
* [https://github.com/bartaz/impress.js/wiki/Examples-and-demos 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
 
== Wednesday ==
 
* Impress.js continued (Styling with CSS)
* Flash Crash course (to be confirmed)
 
'''Student activities''' (hw 1 preparation)
 
Get the following files ("save link as"):
* [http://tecfa.unige.ch/guides/impress.js/impress-demo-1/test.html test.html]
* [http://tecfa.unige.ch/guides/impress.js/impress-demo-1/impress.js impress.js]
* [http://tecfa.unige.ch/guides/impress.js/impress-demo-1/impress-min-presi.css impress-min-presi.css]
 
Students who already started working on their own presentation, may only have a look the file (your choice ...)
 
== Flash CS6 crash course ==
(given in the context of a catchup class to be announced ....)
 
; Elements of the Flash Desktop
* Handout: [[Flash CS6 desktop tutorial]]
* Handout: [[Flash CS3 keyboard shortcuts]]
 
; Creating simple Drawings
Topics: Stage size, Drawing modes, Selecting objects, Drawing and painting tools, Erasing and alignment, Colors, Adding text
* Handout: [[Flash drawing tutorial]]
 
; Simple use of Layers
* Handout: [[Flash layers tutorial]]
 
; Importing clipart and textures
* Resource: [[Clipart]] and [[texture]]
* In a nutshell: Get SVG objects from http://openclipart.org/ and import via Illustrator
 
; Introduction to motion animation
* Previews: [http://tecfa.unige.ch/guides/flash/ex6/motion-tweening-intro/flash-cs-4-motion-tweening.html flash-cs-4-motion-tweening.html]
* Handout: [[Flash CS6 motion tweening tutorial]]
* Summary: [[Flash animation summary]] (optional)
 
; Embedded movie clips
* Previews: [http://tecfa.unige.ch/guides/flash/ex6/motion-tweening-intro/flash-cs-6-motion-tweening-a-clip.html flash-cs-6-motion-tweening-a-clip.html]
* Handout: [[Flash embedded movie clip tutorial]]
 
== Homework 1 ==


* Create a presentation with impress.ch
* Create a presentation with impress.ch
* You can freely choose a topic and reuse prior work.  
* 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'''
'''Due'''
* Monday, week three, '''before class'''
== Homework 2 ==
To be confirmed !! '''Only''' for students without prior Flash knowledge !
* Create an animation with Flash CS6 using motion tweens.
* The moving object must have an embedded animation. In other words, there will be an motion animation on the main time line and another one within the symbol that is being animated.
* Upload the *.fla file to the Worldclassroom
'''Due''':
* TBA
== Documentation / Links ==
; Impress.js
* [[impress.js]] (documentation in this wiki)
* [https://github.com/bartaz/impress.js Official impress.js website] (including downloads, examples and links to other resources)
* [http://shop.oreilly.com/product/9781849696487.do 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)


* Monday, week 2 '''before class'''
; Flash
* Your presentation must be uploaded as a zip file to the Worldclassroom (Canevas)
* [[Flash tutorials]] and/or [[COAP:COAP-2110|COAP-2110 program]]
* ... more to come, but probably we will do this later, e.g. in week 2 or 3

Latest revision as of 19:35, 27 August 2013

Week 1 - Create fancy animated presentations with impress.js

Prerequisites

Monday

Impress.js demos

Student activities / impress.js

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

Wednesday

  • Impress.js continued (Styling with CSS)
  • Flash Crash course (to be confirmed)

Student activities (hw 1 preparation)

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

Students who already started working on their own presentation, may only have a look the file (your choice ...)

Flash CS6 crash course

(given in the context of a catchup class to be announced ....)

Elements of the Flash Desktop
Creating simple Drawings

Topics: Stage size, Drawing modes, Selecting objects, Drawing and painting tools, Erasing and alignment, Colors, Adding text

Simple use of Layers
Importing clipart and textures
Introduction to motion animation
Embedded movie clips

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

  • Monday, week three, before class

Homework 2

To be confirmed !! Only for students without prior Flash knowledge !

  • Create an animation with Flash CS6 using motion tweens.
  • The moving object must have an embedded animation. In other words, there will be an motion animation on the main time line and another one within the symbol that is being animated.
  • Upload the *.fla file to the Worldclassroom

Due:

  • TBA

Documentation / Links

Impress.js
CSS tutorial
Documentation for techies
Flash
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2160/week1&oldid=46161"