COAP:COAP-2100/week6: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(38 intermediate revisions by the same user not shown)
Line 1: Line 1:
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 2100</categorytree>
<categorytree mode="pages" depth="1" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">COAP 2100</categorytree>
=== Week 5  ===
=== Week 6 ===


==== Topics Covered ====
==== Topics Covered ====


* SVG wrapup (see week 5 program)
* Video/Audio formats and codecs
* Video/Audio formats and codecs
* Strategies for dealing with Video formats (Editing and conversion)
* Strategies for dealing with Video formats (Editing and conversion)
* Video with HTML5
* Video and audio with HTML5
* XML (some principles as explained in the [[Editing XML tutorial]])
* Creating Screencasts (very short demo)
* Editing Video files (very short demo)


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


* [[HTML5 audio and video]]
* [[HTML5 audio and video]] ('''mandatory reading''' or find an equivalent)
* [http://en.wikipedia.org/wiki/Digital_container_format Digital container format] (Wikipedia)
* [http://en.wikipedia.org/wiki/Digital_container_format Digital container format] (Wikipedia) and [http://en.wikipedia.org/wiki/Comparison_of_container_formats Comparison of container formats] (Wikipedia). Will show you that lots of codecs are supported by some of these containers.
* [[Video streaming]], [[Multimedia container format]], [[Codec]], [[Video editing]] (some short background info with links)
* [[Video streaming]], [[Multimedia container format]], [[Codec]], [[Video editing]] (some short background info with links)
* [[Flash video component tutorial]] (only "Video encoding with Flash CS3", "Using the video with the component first method", "Making use of captions")
* [http://en.wikipedia.org/wiki/Screencasting Screencasting] (Wikipedia) and [[Screencast]] (links to some tools and other resources)


==== Classroom activities ====
==== Classroom activities - Monday ====


; Monday
* Using video and audio in HTML5 overview
** Tutorial: [[HTML5 audio and video]]
** Video formats (You can find links in [[Multimedia container format]])
** Video software (you can find links in [[Video editing and conversion]]
* Video downloads:
** [https://vimeo.com/ Vimeo] Best quality video repository. For download, you will have to register. Search for open contents.
** http://video.google.com/videoadvancedsearch (Google video search)
** [https://addons.mozilla.org/en-US/firefox/addon/3006 Video downloadhelper], Firefox extension. Allows to download videos from sites like YouTube (however you then run into copyright problems ....).
* For finding background sounds, see [[Sound Assets]]


* Using Videos in HTML5 overview
** Video formats ([[Multimedia container format]])
** http://video.google.com/videoadvancedsearch (Google video search)
** https://addons.mozilla.org/en-US/firefox/addon/3006 (Video download tool, FF extension)
* Creating audios in HTML5 overview
* Converters
** [http://firefogg.org/ FireOgg] Firefox plugin for creating ogg and webm video files
* Create an HTML5 file that includes video and audio
* Create an HTML5 file that includes video and audio
** Start from http://tecfa.unige.ch/guides/html/html5-video/html5-video-simple.html and http://tecfa.unige.ch/guides/html/html5-audio/html5-audio-simple.html
** Start from http://tecfa.unige.ch/guides/html/html5-video/html5-video-simple.html and http://tecfa.unige.ch/guides/html/html5-audio/html5-audio-simple.html or copy/paste code from below
<source lang="XML">
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>HTML 5 video element</title>
  </head>
    <body>
Video (replace the URLS)
      <video id="movie1" controls preload="metadata">
<source src="videos/state-of-wikipedia-480x272.mp4">
<source src="videos/state-of-wikipedia-480x272.ogv">
<source src="videos/state-of-wikipedia-480x272.webm">
        Your browser doesn't support HTML5. Maybe you should upgrade.
      </video>
Audio (replace/reduce the URLs)
      <audio id="movie1" autoplay loop>
<source src="audio/guitar.mp3">
<source src="audio/guitar.ogg">
<source src="audio/guitar.m4a">
<source src="audio/guitar.wav">
        Your browser doesn't support HTML5. Maybe you should upgrade.
      </audio>
      <hr/>
      <a href="http://validator.w3.org/check?uri=referer">W3C validator</a>
    </body>
</html>
</source>


; Wednesday (to be confirmed)
Example 2
<source lang="html5">
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>HTML 5 video element</title>
  </head>
    <body>


* Creating Flash videos '''or''' using HTML5 players
      <h1>The HTML5 video element with style</h1>
* 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:
      <video id="movie1" controls preload="metadata"  
<source lang="actionscript">
            style=" float:right;
<?xml version="1.0" encoding="UTF-8"?>
                    margin: 0px 10px 0px 10px;
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
                    border-style: solid;
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
                    border-width: 50px 50px 50px 50px;
  <head><styling></styling></head>
                    border-image: url(bricks.jpg) 50 round;
  <body>
                    -webkit-border-image: url(bricks.jpg) 50 round;
  <div xml:lang="en">
                    -moz-border-image: url(bricks.jpg) 50 round;
      <p begin="1" dur="4">Let´s start</p>
                    ">
<source src="videos/state-of-wikipedia-480x272.mp4">
<source src="videos/state-of-wikipedia-480x272.ogv">
<source src="videos/state-of-wikipedia-480x272.webm">
        Your browser doesn't support HTML5. Maybe you should upgrade.
      </video>


    </div>
      <p>This is an example file for an HTML5 Video tutorial: <a href="http://edutechwiki.unige.ch/en/HTML5_audio_and_video">http://edutechwiki.unige.ch/en/HTML5_audio_and_video</a></p>
  </body>
 
</tt>
      <p>Border texture was taken from <a href="http://www.aztextures.com/view//bricks_aztextures_8080175-other.html">AZtextures.com</a>, a nice repository of free textures.</p>
</source>
 
Code template for times text (advanced):
       <p>Look at the source if you don't want to read the EduTechWiki article ...</p>
<source lang="actionscript">
 
<?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"
       <hr/>
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
       <a href="http://validator.w3.org/check?uri=referer">W3C validator</a>  
  <head>
     </body>
    <styling>
</html>
      <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>
</source>
</source>


==== Homework 5 ====
==== Wednesday - classroom activities ====
 
* [[COAP:COAP-2100/term project|term project]] Q/R
* Exam
 
==== Homework 6 ====
 
'''Create an HTML5 file that includes at least'''
# a video in two different container variants (webm, ogg, mp4)
# an audio (mp3)
# and at least one VTT captions file for the video.
 
* The page should be "meaningful" and usable with respect to a target population of your choice. (I.e. do not create a page for the instructor, identify an objective and a target population and implement for these ...)
* You may copy/paste text and use media files from some other sources under the condition that you cite these sources.
* You may keep the HTML very simple (i.e. only use h1, div and p tags), but you should try to produce a good user experience. (usability, usefulness and graphic appeal)
* Submit the files to the worldclass room. Make sure to include the media files unless you link to accessible URLs. (We suggest using a zip file).
* You may '''not''' submit the screencast for the term project as project 6


Create an HTML5 video
* ''Due'': Monday, week 8, before class
* Details TBA


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

Latest revision as of 16:21, 20 February 2014

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 6

Topics Covered

  • SVG wrapup (see week 5 program)
  • Video/Audio formats and codecs
  • Strategies for dealing with Video formats (Editing and conversion)
  • Video and audio with HTML5
  • Creating Screencasts (very short demo)
  • Editing Video files (very short demo)

Teaching materials

Classroom activities - Monday

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/> 
    <title>HTML 5 video element</title>
  </head>
    <body>
Video (replace the URLS)
      <video id="movie1" controls preload="metadata">
	<source src="videos/state-of-wikipedia-480x272.mp4">
	<source src="videos/state-of-wikipedia-480x272.ogv">
	<source src="videos/state-of-wikipedia-480x272.webm">
        Your browser doesn't support HTML5. Maybe you should upgrade.
      </video>
Audio (replace/reduce the URLs)
      <audio id="movie1" autoplay loop>
	<source src="audio/guitar.mp3">
	<source src="audio/guitar.ogg">
	<source src="audio/guitar.m4a">
	<source src="audio/guitar.wav">
        Your browser doesn't support HTML5. Maybe you should upgrade.
      </audio>
      <hr/>
      <a href="http://validator.w3.org/check?uri=referer">W3C validator</a> 
    </body>
</html>

Example 2 

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/> 
    <title>HTML 5 video element</title>
  </head>
    <body>

      <h1>The HTML5 video element with style</h1>

      <video id="movie1" controls preload="metadata" 
             style=" float:right;
                     margin: 0px 10px 0px 10px;
                     border-style: solid;
                     border-width: 50px 50px 50px 50px;
                     border-image: url(bricks.jpg) 50 round;
                     -webkit-border-image: url(bricks.jpg) 50 round;
                     -moz-border-image: url(bricks.jpg) 50 round;
                    ">
	<source src="videos/state-of-wikipedia-480x272.mp4">
	<source src="videos/state-of-wikipedia-480x272.ogv">
	<source src="videos/state-of-wikipedia-480x272.webm">
        Your browser doesn't support HTML5. Maybe you should upgrade.
      </video>

      <p>This is an example file for an HTML5 Video tutorial: <a href="http://edutechwiki.unige.ch/en/HTML5_audio_and_video">http://edutechwiki.unige.ch/en/HTML5_audio_and_video</a></p>

      <p>Border texture was taken from <a href="http://www.aztextures.com/view//bricks_aztextures_8080175-other.html">AZtextures.com</a>, a nice repository of free textures.</p>

      <p>Look at the source if you don't want to read the EduTechWiki article ...</p>



      <hr/>
      <a href="http://validator.w3.org/check?uri=referer">W3C validator</a> 
    </body>
</html>

Wednesday - classroom activities

Homework 6

Create an HTML5 file that includes at least

  1. a video in two different container variants (webm, ogg, mp4)
  2. an audio (mp3)
  3. and at least one VTT captions file for the video.
  • The page should be "meaningful" and usable with respect to a target population of your choice. (I.e. do not create a page for the instructor, identify an objective and a target population and implement for these ...)
  • You may copy/paste text and use media files from some other sources under the condition that you cite these sources.
  • You may keep the HTML very simple (i.e. only use h1, div and p tags), but you should try to produce a good user experience. (usability, usefulness and graphic appeal)
  • Submit the files to the worldclass room. Make sure to include the media files unless you link to accessible URLs. (We suggest using a zip file).
  • You may not submit the screencast for the term project as project 6
  • Due: Monday, week 8, before class
Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=COAP:COAP-2100/week6&oldid=51244"