COAP:COAP-3000/week2: Difference between revisions

Revision as of 18:16, 25 March 2018

COAP:COAP-3000
◀▬▬▶
⚐	☸
⚒ 2018/03/25
Objectives
create an HTML5 video add subtitles add simple interactivity

Objectives

create an HTML5 video
add subtitles
add simple interactivity

Week 2 topics - Create HTML5 videos

This week you will learn how to create an HTML5 page that includes an (HTML5) video that includes tracks (subtitle) and some custom interactivity.

Monday

Presentation and demo

Understanding the HTML5 video element
Understanding tracks and the tracks element

Demo

Create a short video that uses tracks. Start from the following code fragment if you like:

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/> 
    <title>........</title>
  </head>
    <body>

      <h1>.........</h1>

      <p>....</p>

      <video id="movie1" controls preload="metadata">
	<source src=".... .mp4"/>
	<source src=".... .webm"/>
	<track kind="subtitles" label="EN subtitles" src="....vtt" srclang="en" default/>
      </video>

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

Wednesday

Add some JavaScript to manipulate the video.

Homework/project 2

Project #2 will allow you to consolidate work started in the classroom.

Task

(1) Create an HTML5 video using the video, source and track elements

The video must include at least four captions (sutitles)
The page must include JavaScript code to manipulate the video
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 (what is it's purpose ? audience ?) of the video, 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.

Submission

Upload to the World classroom (Canevas):

A zip file for the HTML,CSS,video,JavaScript, etc. (must be functional after dezipping)
A report as screen cast file or written report.

Tip: Unzip 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 3, 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 ?

Resources

Introductions to HTML5 video

HTML for Masterminds, Chapter 6

HTML5 audio and video (Instructor's lecture notes, this wiki)

Adding captions and subtitles to HTML5 video - App Center | MDN

@@ Line 10: / Line 10: @@
 }}
-Program TBA
+== Week 2 topics - Create HTML5 videos ==
+This week you will learn how to create an HTML5 page that includes an (HTML5) video that includes tracks (subtitle) and some custom interactivity.
+== Monday ==
+=== Presentation and demo ===
+* Understanding the HTML5 <code>video</code> element
+* Understanding tracks and the tracks element
+=== Demo ===
+* Create a short video that uses tracks. Start from the following code fragment if you like:
+<source lang="HTML5">
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8"/>
+    <title>........</title>
+  </head>
+    <body>
+      <h1>.........</h1>
+      <p>....</p>
+      <video id="movie1" controls preload="metadata">
+	<source src=".... .mp4"/>
+	<source src=".... .webm"/>
+	<track kind="subtitles" label="EN subtitles" src="....vtt" srclang="en" default/>
+      </video>
+      <hr/>
+      <a href="http://validator.w3.org/check?uri=referer">W3C validator</a>
+    </body>
+</html>
+</source>
+== Wednesday ==
+Add some JavaScript to manipulate the video.
+== Homework/project 2 ==
+Project #2 will allow you to consolidate work started in the classroom.
+=== Task ===
+'''(1) Create an HTML5 video using the video, source and track elements'''
+* The video must include at least four captions (sutitles)
+* The page must include JavaScript code to manipulate the video
+* 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 (what is it's purpose ? audience ?) of the video, 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.
+'''Submission'''
+Upload to the World classroom (Canevas):
+* A zip file for the HTML,CSS,video,JavaScript, etc. (must be functional after dezipping)
+* A report as screen cast file or written report.
+Tip: Unzip 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 3''', '''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 ?
+== Resources ==
+=== Introductions to HTML5 video ===
+* HTML for Masterminds, Chapter 6
+* [[HTML5 audio and video]] (Instructor's lecture notes, this wiki)
+* [https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video Adding captions and subtitles to HTML5 video - App Center | MDN]