COAP:COAP-2100/week6: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
mNo edit summary
Line 4: Line 4:
==== Topics Covered ====
==== Topics Covered ====


* Dealing with pictures (some reminders about formats and size)
* Video/Audio formats and codecs
* Strategies for dealing with Video formats
* Strategies for dealing with Video formats (Editing and conversion)
* Video with Flash
* Video with HTML5
** Encoding of Flash videos
** Creating Flash files with the video component
** Adding captions (sub-titles) with [[Timed Text]]
* XML (some principles as explained in the [[Editing XML tutorial]])
* XML (some principles as explained in the [[Editing XML tutorial]])


==== Teaching materials ====
==== Teaching materials ====


* [[HTML5 video and audio tutorial]]
* [http://en.wikipedia.org/wiki/Image_file_formats Image File Formats] (Wikipedia)
* [http://en.wikipedia.org/wiki/Image_file_formats Image File Formats] (Wikipedia)
<!-- * [[Wiki]] and [[Mediawiki]] (background information and links) -->
<!-- * [[Wiki]] and [[Mediawiki]] (background information and links) -->
Line 19: Line 17:
* [[Flash video component tutorial]] (only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")
* [[Flash video component tutorial]] (only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")


<!--
==== Web sites to visit ====
; The original
* http://c2.com/cgi/wiki?FrontPage WikiWiki
** Demo page: http://c2.com/cgi/wiki?WikiWikiSandbox
; Online wiki hosting services
* http://pbworks.com/ pbWiki, commercial on-line service
** Demo site: https://atelierwebmaster.pbworks.com/
* http://wikispaces.com Wikispaces, commercial on-line service
** Demo site: http://atelierwebmaster.wikispaces.com/
; Mediawikis (Wikipedia engine)
* Demo site: http://www.wikimedia.org/
** http://en.wikipedia.org/wiki/Main_Page
** Other Wikimedia sites ...
* Demo site: http://www.wikia.com/
* Demo site: http://edutechwiki.unige.ch/
* Demo site: https://developer.mozilla.org/en/Web_Development
-->


==== Classroom activities ====
==== Classroom activities ====
Line 51: Line 22:
; Monday
; Monday


* Images (reminder about formats and size)
* Creating videos for the HTML5
 
* Creating Flash videos: [[Flash video component tutorial]]
** Video formats ([[Multimedia container format]])
** Video formats ([[Multimedia container format]])
** http://video.google.com/videoadvancedsearch (Google video search)
** http://video.google.com/videoadvancedsearch (Google video search)
** https://addons.mozilla.org/en-US/firefox/addon/3006 (Video download tool, FF extension)
** https://addons.mozilla.org/en-US/firefox/addon/3006 (Video download tool, FF extension)
** Video encoding for Flash and Timed Text ([[Flash video component tutorial]], only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")
 
; Wednesday (to be confirmed)
 
* Creating Flash videos
* Video encoding for Flash and Timed Text ([[Flash video component tutorial]], only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")


Code template for timed text:
Code template for timed text:
Line 100: Line 73:
</tt>
</tt>
</source>
</source>
* HTML 5 Video tag (short info)
<!--
* Wikis: the concept, variants
** Visit of some wikis (see wikisites above) + hands-on
** Wikimedia and the [[Mediawiki]] engine, including some visits and hands on Mediawiki
** Wiki politics (editing guidelines and governance)
** Easy online wiki hosting (see [[Wiki#Wiki_hosting Wiki]] (Wiki hosting section)
-->




==== Homework 5 ====
==== Homework 5 ====


Create a Flash video with captions
Create an HTML5 video
 
* Details TBA
* Encode a video with the Flash or the Adobe Media encoder (remove unwanted start/end of the film and select an appropriate output format)
* Prepare a flash "movie clip" that includes playback with the video component plus captions.
* You can choose any film you like, but preferably one that you made yourself (originality bonus)
 
Bonus points: Extra elements in the Flash page, interesting captions, good timing, etc. I.e. the result should look professional and be useful.
 
I suggest that those who already turned in 3-4 homeworks skip this exercice. I will not test Flash in the final exam. I only require that you have some very basic understanding of timed text (i.e. use the "p" tag to define start and duration of captions ....)
 
When you upload the result, make sure to include all files needed to see the Flash clip, i,e, html, swf, component swf, flv, js. To get this right, I suggest to use a new folder for this project.


Due: Wednesday, week 6
Due: Moday, week 7
[[Category:COAP 2100]]
[[Category:COAP 2100]]

Revision as of 14:42, 21 April 2012

COAP 2100
COAP 2100 Archive
COAP:COAP-2100
COAP:COAP-2100/exams
COAP:COAP-2100/term project
COAP:COAP-2100/week1
COAP:COAP-2100/week2
COAP:COAP-2100/week3
COAP:COAP-2100/week4
COAP:COAP-2100/week5
COAP:COAP-2100/week6
COAP:COAP-2100/week7
COAP:COAP-2100/week8

Week 5

Topics Covered

  • Video/Audio formats and codecs
  • Strategies for dealing with Video formats (Editing and conversion)
  • Video with HTML5
  • XML (some principles as explained in the Editing XML tutorial)

Teaching materials


Classroom activities

Monday
Wednesday (to be confirmed)
  • Creating Flash videos
  • Video encoding for Flash and Timed Text (Flash video component tutorial, only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")

Code template for timed text: 

<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head><styling></styling></head>
  <body>
   <div xml:lang="en">
      <p begin="1" dur="4">Let´s start</p>

    </div>
  </body>
</tt>

Code template for times text (advanced): 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tt SYSTEM "mini-tt.dtd">
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  <head>
    <styling>
      <style id="title" tts:backgroundColor="transparent" tts:color="red" tts:fontSize="24"/>
    </styling>
  </head>
  <body>
   <div xml:lang="en">
      <p begin="0" dur="9" style="title">Something</p>
      <p begin="30" dur="5">My 
        <span tts:backgroundColor="yellow" tts:color="black">
        something</span>
      </p>
      <p begin="35" dur="5">
        <span tts:backgroundColor="transparent"></span>
        Working hard ....
      </p>
      <p begin="40" dur="4">The outside (not my bike)</p>
    </div>
  </body>
</tt>


Homework 5

Create an HTML5 video

  • Details TBA

Due: Moday, week 7

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week6&oldid=38778"