COAP:COAP-2100/week6: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(56 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 6 [[Help:COAP-2100|COAP 2100]] ===
=== Week 6 ===


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


We shall have a (superficial) look at key elements of client-side web page interactivity
* 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)


* HTML forms
==== Teaching materials ====
* JavaScript
 
* DOM
* [[HTML5 audio and video]] ('''mandatory reading''' or find an equivalent)
* DHTML (HTML + DOM + JavaScript + CSS)
* [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)
* [http://en.wikipedia.org/wiki/Screencasting Screencasting] (Wikipedia) and [[Screencast]] (links to some tools and other resources)
 
==== Classroom activities - 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]]


==== Teaching materials ====
* 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 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>
 
Example 2
<source lang="html5">
<!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>


* [[Javascript tutorial - basics]]
* [[DHTML]]
* [[HTML forms tutorial]] (only parts)
* [[DOM]] (just some links)


==== Classroom activities ====


; Monday
      <hr/>
* (Whort) mid-term exam feedback
      <a href="http://validator.w3.org/check?uri=referer">W3C validator</a>
* JavaScript lecture using [[Javascript tutorial - basics]]
    </body>
* [[DHTML]] lecture (part I) and some JavaScript hands-on, i.e. code modification of examples shown in the [[DHTML]] tutorial:
</html>
** [http://tecfa.unige.ch/guides/js/ex/dhtml/tree-walking2.html tree-walking2.html] (save link as)
</source>
** [http://tecfa.unige.ch/guides/js/ex/dhtml/tree-walking3.html tree-walking3.html](save link as)


; Wednesday
==== Wednesday - classroom activities ====
* HW feedback
* Term projects (short Q/R)
* [[DHTML]] lecture (part II, if needed)
* [[HTML forms tutorial|HTML forms]] lecture (only parts) and hands-on. Modify the following example. Save both files on your local computer !
** [http://tecfa.unige.ch/guides/js/ex/coap/week-3/2-xhtml-radio-buttons.html 2-xhtml-radio-buttons.html] (save as !)
** [http://tecfa.unige.ch/guides/js/ex/coap/week-3/2-xhtml-radio-buttons.js 2-xhtml-radio-buttons.js]


==== Homework 5 ====
* [[COAP:COAP-2100/term project|term project]] Q/R
* Exam


; Task
==== Homework 6 ====
* Create a DHTML page that has a least one button allowing the user to change a style or something else in a page
* You may reuse code from the [[DHTML]] page starting from the [[DHTML#Collections_and_creation_of_elements|Collections and creation of elements]] section. "May reuse" means of course that you can code your own or build on top of other code (but if you choose the latter, make sure to give credits somewhere, e.g. in the code)


; To get an A
'''Create an HTML5 file that includes at least'''
* Create a page with real contents and implement DHTML changes that make sense for a given target population.
# a video in two different container variants (webm, ogg, mp4)
* Add some extra CSS style
# an audio (mp3)
* Explain somewhere in the page what pressing the button(s) will do or at least make the button labels self-explaining.
# and at least one VTT captions file for the video.


; Due
* 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 ...)
* Before Monday week 7 class
* 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


; Submission
* ''Due'': Monday, week 8, before class
* Submit the file to the worldclassroom.


[[Category:COAP 2100]]
[[Category:COAP 2100]]

Latest revision as of 17: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"