COAP:COAP-2100/week6: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(49 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 ====


==== Teaching materials ====
* 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]]


* [[Javascript tutorial - basics]]
* Create an HTML5 file that includes video and audio
* [[DHTML]]
** 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
* [[HTML forms tutorial]] (only parts)
<source lang="XML">
* [[DOM]] (just some links)
<!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>


==== Classroom activities ====
Example 2
<source lang="html5">
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>HTML 5 video element</title>
  </head>
    <body>


; Monday
      <h1>The HTML5 video element with style</h1>
* (Short) mid-term exam feedback
* JavaScript lecture using [[Javascript tutorial - basics]]
* [[DHTML]] lecture (part I) and some JavaScript hands-on, i.e. code modification of examples shown in the [[DHTML]] tutorial:
** [http://tecfa.unige.ch/guides/js/ex/dhtml/tree-walking2.html tree-walking2.html] (save link as)
** [http://tecfa.unige.ch/guides/js/ex/dhtml/tree-walking3.html tree-walking3.html](save link as)


; Wednesday
      <video id="movie1" controls preload="metadata"
* HW feedback
            style=" float:right;
* Term projects (short Q/R)
                    margin: 0px 10px 0px 10px;
* [[HTML forms tutorial|HTML forms]] lecture (only parts) and hands-on.
                    border-style: solid;
** Play with Kompozer or another HTML editor (adding some forms)
                    border-width: 50px 50px 50px 50px;
** Modify the following example. Save both files on your local computer ! If you use Kompozer, you may have to edit in the Source Window since positioning the cursor after a form element seems to be difficult. You also might consider installing Kompozer 0.8beta which includes a split interface. Do '''not''' use Kompozer to edit JavaScript files. Use any programming editor you like, e.g. HTML Notetab.
                    border-image: url(bricks.jpg) 50 round;
** [http://tecfa.unige.ch/guides/js/ex/coap/week-3/2-xhtml-radio-buttons.html 2-xhtml-radio-buttons.html] (save as !)
                    -webkit-border-image: url(bricks.jpg) 50 round;
** [http://tecfa.unige.ch/guides/js/ex/coap/week-3/2-xhtml-radio-buttons.js 2-xhtml-radio-buttons.js]
                    -moz-border-image: url(bricks.jpg) 50 round;
* [[DHTML]] lecture (part II, if needed)
                    ">
** Playing with more examples
<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>


==== Homework 6 ====
      <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>


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


; Submission
      <p>Look at the source if you don't want to read the EduTechWiki article ...</p>
* Submit the files to the worldclassroom.


; Final exam
* There will be some minimal JS testing in the final exam. However, I require neither that you understand programming principles nor technical DOM details. However, I may ask you to be able to make very small changes in JS code or to adjust some HTML forms code (radio buttons).


'''''Pick either option A or option B''''' !


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


; Task
==== Wednesday - classroom activities ====
* 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. For example, take either one
** [http://tecfa.unige.ch/guides/js/ex/dhtml/tree-walking2.html tree-walking2.html] (just color change)
** [http://tecfa.unige.ch/guides/js/ex/dhtml/tree-walking3.html tree-walking3.html]


You also can take code made by someone else. In this case, '''dot not forget''' to quote the source and to insure that you are allowed to reuse it. There is a fine line between plagiarism and reuse .....
* [[COAP:COAP-2100/term project|term project]] Q/R
* Exam


; To get an A
==== Homework 6 ====
* Create a page with real contents and implement DHTML changes that make sense for a given target population.
* Add some extra CSS style
* Care for usability. e.g. explain somewhere in the page what pressing the button(s) will do or at least make the button labels self-explaining.


===== Option B =====
'''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.


* Create a simple quiz with JavaScript (including mine, i.e. the files we used in class)
* 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 use code from any source, but it must work with modern browsers, quiz contents must be your own and '''you must explain what you did change'''
* 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


; To get an A
* ''Due'': Monday, week 8, before class
* Create a small, but useful quiz
* Add some extra CSS style
* Care for usability and user experience
* Give credits in proper way


[[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"