COAP:COAP-2100/week5: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(31 intermediate revisions by the same user not shown)
Line 1: Line 1:
=== Week 5 [[Help:COAP-2100|COAP 2100]] ===
<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>


==== Topics Covered ====
=== Week 5 ===


* Dealing with pictures (some reminders about formats and size)
==== Topics covered ====
* 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 ====
* Static SVG (continued)
* Dynamic SVG


* [http://en.wikipedia.org/wiki/Image_file_formats Image File Formats] (Wikipedia)
==== Monday ====
<!-- * [[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")


* Work on project 4 (See week 4)
* [[Static SVG tutorial]] (grouping constructs)
* [[SVG/SMIL animation tutorial]] (demos)
* [http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG SVG Essentials/Animating and Scripting SVG], part of [http://commons.oreilly.com/wiki/index.php/SVG_Essentials SVG Essentials] On-line SVG textbook. Wiki version of J. David Eisenberg (2002), ''SVG Essentials'', O'Reilly
* You can find a PDFs of SVG book chapter in the worldclassroom / Documents folder


<!--
==== Wednesday ====
==== Web sites to visit ====


; The original
* (Short) discussion of term projects
* [[SVG/SMIL animation tutorial]] (try it yourself)
* [[Interactive SVG-SMIL animation tutorial]] (interactivity demo)
* [[Using Inkscape for web animation]] (some tips on preparing complex SVG files for animation)


* http://c2.com/cgi/wiki?FrontPage WikiWiki
SVG animation hands on:
** Demo page: http://c2.com/cgi/wiki?WikiWikiSandbox


; Online wiki hosting services
'''<code>animate</code>example code that you can copy / paste into an editor'''
 
<source lang="XML">
* http://pbworks.com/ pbWiki, commercial on-line service
<?xml version="1.0"?>
** Demo site: https://atelierwebmaster.pbworks.com/
<svg xmlns="http://www.w3.org/2000/svg">
 
  <title>Simple animate example</title>
* http://wikispaces.com Wikispaces, commercial on-line service
  <desc>Rectangle shape will change</desc>
** Demo site: http://atelierwebmaster.wikispaces.com/
  <rect x="50" y="50" width="10" height="100" style="fill:#CCCCFF;stroke:#000099">
 
    <animate attributeName="width"  from="10px"  to="100px"
; Mediawikis (Wikipedia engine)
    begin="0s" dur="10s" />
    <animate attributeName="height" from="100px" to="10px"
    begin="0s" dur="10s" />
  </rect>
  <text x="50" y="170" style="stroke:#000099;fill:#000099;font-size:14;">
  Hello. Admire the dynamic rectangle</text>
</svg>
</source>


* Demo site: http://www.wikimedia.org/
Simple Motion example using mpath, variant 1 (more difficult):
** http://en.wikipedia.org/wiki/Main_Page
<source lang="XML">
** Other Wikimedia sites ...
* Demo site: http://www.wikia.com/
* Demo site: http://edutechwiki.unige.ch/
* Demo site: https://developer.mozilla.org/en/Web_Development
 
-->
 
==== Classroom activities ====
 
; Monday
 
* Images (reminder about formats and size)
 
* 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")
 
Code template for timed text:
<source lang="actionscript">
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
<svg xmlns="http://www.w3.org/2000/svg"  
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
    xmlns:xlink="http://www.w3.org/1999/xlink">
   <head><styling></styling></head>
   <title>Simple Motion animation example</title>
  <body>
  <div xml:lang="en">
<rect x="15" y="5" rx="5" ry="5" width="20" height="10" style="fill:#CCCCFF;stroke:#000099">
      <p begin="1" dur="4">Let´s start</p>
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
 
      <mpath xlink:href="#path1"/>
    </div>
    </animateMotion>
  </body>
  </rect>
</tt>
<path id="path1" d="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
                    52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"
                    stroke-width="5" stroke="#000000" fill="none"/>
</svg>
</source>
</source>
Code template for times text (advanced):
Simple Motion example using path, variant2
<source lang="actionscript">
<source lang="XML">
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tt SYSTEM "mini-tt.dtd">
<svg xmlns="http://www.w3.org/2000/svg"  
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
   <title>Simple Motion animation example</title>
   <head>
 
    <styling>
<rect x="15" y="5" rx="5" ry="5" width="20" height="10"
      <style id="title" tts:backgroundColor="transparent" tts:color="red" tts:fontSize="24"/>
      style="fill:#CCCCFF;stroke:#000099">
    </styling>
      <animateMotion dur="6s" repeatCount="indefinite" rotate="auto"
  </head>
                      path ="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
  <body>
                      52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"/>
  <div xml:lang="en">
  </rect>
      <p begin="0" dur="9" style="title">Something</p>
</svg>
      <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>
* HTML 5 Video tag (short info)
<!--
* 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)
-->
; Wednesday
* Homework 3 feedback (15 min.)
* [[COAP-2100/term project|Term project]] assignment and discussion (15 min.)
* Break (10 min.)
* Mid-term (see below) (80 minutes, 90 minutes max!)
==== Mid-term exam ====
You will be allowed to use all materials (open book, open Internet). However, use of communication software (including websites like Facebook) is strictly forbidden. Offenders will get an F.
'''Teaching material''' can be found in each weekly program. The most important handouts are listed on the [[Help:COAP-2100|COAP]] main page.
; Subjects that will be tested
* Be able to find information in the Firefox Codeburner/SitePoint HTML and CSS reference
* Understanding of principles underlying web formats (HTML, XHTML and CSS) including some of the history
* Be able to create simple HTML code and detect errors
** DocType declarations (superficially, e.g. understand the difference between the strict and transitional HTML4x/XHTML1x models)
** Required tags: ''html,body,title,link,style,a,img,h1,h2,h2,p,blockquote,ul,ol,li,div,span''
** Required attributes: style + the elementary attributes of the HTML ''a'', ''img'' and ''link'' tags + class + id
** Notice: I may design an exam question that asks you to find the definition of another HTML tag or attribute.
* Simple CSS styling
** Basic selectors (tag names)
** Class and ID selectors (.xxx and .#xxx)
** Simple boxing properties (i.e. margins, not positioning)
** Simple text properties, e.g. fonts, color, font-family, line spacing, left/right/center alignment
* Color models
** Basic principles of RGB, RGBa, HSL and HSLa (''not'' HSV) and use of color models for CSS color and background-color values. E.g. you should know that RBG combines amount of three colors, that HSL is a color on the "360 color wheel" plus saturation and light. E.g. you should know that alpha means transparency.
** Be able to find a RGB hex value for a given color name and the other way round (using any tool/table you like)
* Simple design principles
** Be able to comment on a web site design
** Be able to state basic usability principles (what does it mean ?)
** What do we mean by wireframing
** Use of color palettes (basic principles)
** Testing a web site with users (basic principles)
<!--
* XML
** Roles of XML, types of XML languages
** XML Formalism, wellformedness
** The concept of XML grammars and validity (no technical details about DTDs, XML Schemas, etc.)
-->
<!--
* Wikis
** Principles, i.e. what is a wiki, in which contexts are they popular, kinds of wiki engines (roughly)
** Mediawikis (create a page, titles, paragraphs and list, internal and external links, categories, simple use of pictures)
** Wiki governance (editing policies)
-->
; Exam type
* The exam will be a quiz with various types of questions(e.g. MCQs, fill-in, debug, short answers)
* Tip: Most answers can be found in the [[Help:COAP-2100#Index_of_important_teaching_materials|teaching materials]] available in this wiki.


==== Homework 5 ====
==== Homework 5 ====


Create a Flash video with captions
Create either an HTML5/SVG page, a HTML5 page that includes SVG, or a pure SVG page that includes some animation:
 
* The page should include at least 2 animations
* Encode a video with the Flash or the Adobe Media encoder (remove unwanted start/end of the film and select an appropriate output format)
* The animation should be useful in one way or another. You can explain the purpose of the animation either within the page or by other means (e.g. through a comment in the world classroom)
* Prepare a flash "movie clip" that includes playback with the video component plus captions.
* Bonus: Some interactivity (e.g. a mouse click or mouse over)
* 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 ....)
You either can create your own drawing using any SVG tool or add animation to a clipart file from http://openclipart.org. If you use external resources, please cite, e.g. in the SVG code using the ''desc'' element.


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 before class (upload to the world classroom)


Due: Wednesday, week 6
[[Category: COAP_2100]]

Latest revision as of 19:46, 12 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 5

Topics covered

  • Static SVG (continued)
  • Dynamic SVG

Monday

Wednesday

SVG animation hands on:

animateexample code that you can copy / paste into an editor 

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <title>Simple animate example</title>
  <desc>Rectangle shape will change</desc>
  <rect x="50" y="50" width="10" height="100" style="fill:#CCCCFF;stroke:#000099">
    <animate attributeName="width"  from="10px"  to="100px" 
	     begin="0s" dur="10s" />
    <animate attributeName="height" from="100px" to="10px"
	     begin="0s" dur="10s" />
  </rect>
  <text x="50" y="170" style="stroke:#000099;fill:#000099;font-size:14;">
  Hello. Admire the dynamic rectangle</text>
</svg>

Simple Motion example using mpath, variant 1 (more difficult): 

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Simple Motion animation example</title>
 
 <rect x="15" y="5" rx="5" ry="5" width="20" height="10" style="fill:#CCCCFF;stroke:#000099">
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
       <mpath xlink:href="#path1"/>
    </animateMotion>
   </rect>
 <path id="path1" d="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
                     52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12" 
                     stroke-width="5" stroke="#000000" fill="none"/>
 </svg>

Simple Motion example using path, variant2 

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Simple Motion animation example</title>

 <rect x="15" y="5" rx="5" ry="5" width="20" height="10"  
       style="fill:#CCCCFF;stroke:#000099">
       <animateMotion dur="6s" repeatCount="indefinite" rotate="auto"
                      path ="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
                      52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"/>
   </rect>
 </svg>

Homework 5

Create either an HTML5/SVG page, a HTML5 page that includes SVG, or a pure SVG page that includes some animation:

  • The page should include at least 2 animations
  • The animation should be useful in one way or another. You can explain the purpose of the animation either within the page or by other means (e.g. through a comment in the world classroom)
  • Bonus: Some interactivity (e.g. a mouse click or mouse over)

You either can create your own drawing using any SVG tool or add animation to a clipart file from http://openclipart.org. If you use external resources, please cite, e.g. in the SVG code using the desc element.

Due: Wednesday week 6 before class (upload to the world classroom)

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