COAP:COAP-2100/week6: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
mNo edit summary
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 5  ===


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


We shall have a (superficial) look at key elements of client-side web page interactivity
* Dealing with pictures (some reminders about formats and size)
* Strategies for dealing with Video formats
* Video with Flash
** 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]])


* HTML forms
==== Teaching materials ====
* JavaScript
 
* DOM
* [http://en.wikipedia.org/wiki/Image_file_formats Image File Formats] (Wikipedia)
* DHTML (HTML + DOM + JavaScript + CSS)
<!-- * [[Wiki]] and [[Mediawiki]] (background information and links) -->
* [[Video streaming]], [[Multimedia container format]], [[Codec]] (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")
 
 
<!--
==== Web sites to visit ====


==== Teaching materials ====
; 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


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


==== Classroom activities ====
==== Classroom activities ====


; Monday
; Monday
* (Short) mid-term exam feedback
* JavaScript lecture using [[Javascript tutorial - basics]]
* 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)
* Additional reading for those who are curious:  [[DHTML]]


; Wednesday
* Images (reminder about formats and size)
* No HW feedback (will be done on week 7)
* Term projects (short Q/R)
* [[HTML forms tutorial|HTML forms]] lecture (only parts) and hands-on.
** Play with Kompozer or another HTML editor (adding some forms)
** 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.
** [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 6 ====
* Creating Flash videos: [[Flash video component tutorial]]
** 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)
** 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")


; Due
Code template for timed text:
* Before Monday week 7 class
<source lang="actionscript">
<?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>


; Submission
    </div>
* Submit the files to the worldclassroom.
  </body>
</tt>
</source>
Code template for times text (advanced):
<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"
    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>
</source>


; Final exam
* HTML 5 Video tag (short info)
* 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''''' !
<!--
* 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)
-->


===== Option A =====


; Task
==== Homework 5 ====
* 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 .....
Create a Flash video with captions


; To get an A
* Encode a video with the Flash or the Adobe Media encoder (remove unwanted start/end of the film and select an appropriate output format)
* Create a page with real contents and implement DHTML changes that make sense for the given target population for whom you created the contents.
* Prepare a flash "movie clip" that includes playback with the video component plus captions.
* Add some extra CSS style
* You can choose any film you like, but preferably one that you made yourself (originality bonus)
* 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 =====
Bonus points: Extra elements in the Flash page, interesting captions, good timing, etc. I.e. the result should look professional and be useful.


* Create a simple quiz with JavaScript (including mine, i.e. the files we used in class)
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 ....)
* 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'''


; To get an A
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.
* Create a small, but useful quiz
* Add some extra CSS style
* Care for usability and user experience, e.g. add some introductory text and make sure that the feedback is understandable.
* Give credits in a proper way if you reuse materials and contents from another web site.


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

Revision as of 08:48, 16 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

  • Dealing with pictures (some reminders about formats and size)
  • Strategies for dealing with Video formats
  • Video with Flash
    • 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)

Teaching materials


Classroom activities

Monday
  • Images (reminder about formats and size)

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>
  • HTML 5 Video tag (short info)


Homework 5

Create a Flash video with captions

  • 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

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